/* /shinei/assets/style.css — ズメカン（伸栄鉄工 図面管理）の共通CSS。2026-09-26 全面改訂（ユーザー「UI がダサい」）。
   旧版（/pm/ の複製・紺＋灰の SaaS 型）は bak_sd_assets_20260926_ui/style.css。

   ── 物差し（ユーザーの一言）: 「やわらかい雰囲気で、きちんと清潔感のある UI」 ──────────────
   参考 1（おいかぜ 20 周年）から **色と温度**: 生成り〜ベージュの地、グリーン、強調は黄色のマーカー、丸みのある和文ゴシック（ブルーは後に全廃）。
   参考 2（Stellate Metrics）から **構造と密度**: 左の色付きナビ（PC）＋下タブ（スマホ）、上の帯、大きな数字のタイル、
   淡い見出し行と薄い区切りの表、広い余白。参考 2 の冷たい SaaS グレーにはしない。参考 1 の縦書き・イラストは持ち込まない。

   ・地はベージュ（ユーザー提示の 4 色 #B6AE9F/#C5C7BC/#DEDED1/#FBF3D1 が基準）。表・カード・入力欄は白。文字は黒（ユーザー指示）。段差は 1px の薄い罫と色面だけ（濃い輪郭・二重枠・太い縁を作らない）
   ・ブルー（--accent: ナビの帯・見出し・主動作）とグリーン（--green: 区画の札・番号の四角・完了）はベージュに合わせて彩度を抑えた
   ・状態色は 2 つ: 要確認=薄い琥珀 / 不一致・失敗=薄い赤（黒文字）。完了・有効はベージュの札
   ・書体は Zen Kaku Gothic New（400/700）。図番・ロットNo・日付・件数は tabular-nums で桁を揃える
   ・工場の照明下・60 代・スマホ: 本文 16px・入力欄とボタンは 44px 以上・文字色は濃紺グレー（AA を守る）。ダークは作らない

   旧トークン名（--navy --crimson --panel --border --ink --muted）は各画面の <style> がまだ参照しているので、
   新トークンへの別名として残す（--navy は「アクセント（緑）」、--crimson は「不一致の赤」に読み替える）。 */

:root{
  --font:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;
  /* 地と文字 */
  --ground:#faf7ef;      /* 地（#FBF3D1 を白に寄せた。ユーザー指示「全体的に薄く」） */
  --ground-2:#dedcd1;    /* 明るいベージュ（ユーザー提示 #DEDED1。区画の薄い面・無効） */
  --paper:#fff;          /* カード・表・入力欄 */
  --paper-2:#efeee6;     /* 表の見出し行・サムネの下地（#DEDED1 を白に寄せた薄い段差） */
  --ink:#111;            /* 本文は黒（ユーザー指示「文字は読みやすいようにブラック」） */
  --ink-2:rgba(0,0,0,.78); /* 二次的なラベル（黒の透明度落とし） */
  --muted:rgba(0,0,0,.62); /* 補足（白で 6.4:1・クリーム地で 5.6:1） */
  --faint:rgba(0,0,0,.55); /* 例（プレースホルダー。白で 4.6:1） */
  /* ブルー・グリーン・マーカー */
  /* 有彩色のアクセントは使わない（ユーザー指示「青要らない」「緑もなし」）。押せるものは #B6AE9F の面に黒文字 */
  --accent:#846c4f; --accent-hover:#7a6449; --accent-deep:#5f4d38; --accent-tint:#ece6da; --accent-line:#c5c7bc;   /* 主ボタン＝ユーザーのモックの濃いブラウン（白文字 4.95:1）。無彩色方針の唯一の例外 */
  --link:#111;           /* リンクは黒の下線（訪問後も黒） */
  --green:var(--accent); --green-deep:var(--accent); --green-tint:var(--accent-tint);   /* 旧名（緑は使わない） */
  --marker:#ece6da;      /* 旧「黄色マーカー」の用途（現在位置の面） */
  /* 罫線 */
  --line:#c5c7bc;        /* 罫線・区切り（ユーザー提示 #C5C7BC） */
  --line-w:#edece5;      /* 白の上の区切り（表の行。ゼブラと重ならない最も薄い線） */
  --rule:#c5c7bc;        /* 上の帯の上端・下端の罫（ユーザー指示「上下の罫線は入れて」） */
  --line-strong:#a09a8c; /* 入力欄の枠（#B6AE9F を少し濃く。照明下で見える） */
  /* 状態色（3 つ） */
  --ok:#111;      --ok-bg:#dedcd1;  --ok-line:#c5c7bc;   /* 完了・有効: 緑はやめ、薄いベージュの札に黒文字 */
  --warn:#111;    --warn-bg:#fbf1d6; --warn-line:#e8d9ad;   /* 要確認: ごく薄い琥珀の面に黒文字 */
  --ng:#111;      --ng-bg:#fcefed;  --ng-line:#e7c9c4;    /* 不一致・要選択・失敗: 薄いピンクの面に黒文字（枠は 1px） */
  --info-bg:#efeee6;
  /* 形 */
  --r:6px; --r-lg:10px;
  --shadow-1:0 1px 2px rgba(60,55,40,.05), 0 2px 10px rgba(60,55,40,.05);   /* カード（薄く広く） */
  --shadow:0 12px 32px rgba(60,55,40,.18);                                  /* 浮くもの（ドロワー・ポップアップ） */
  --on-accent:#fff;      /* ブラウンの面の上の文字 */
  --band-bg:#f3f0e6; --band-fg:#111; --band-line:#c5c7bc;   /* 上の帯・左の帯＝明るいベージュに黒文字 */
  --warn-text:#111; --ng-text:#111; --ok-text:#111;   /* 薄い状態面の上の文字は黒 */
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pad-card:1.5rem; --pad-input:.875rem;   /* カードの内側／入力欄の左右（ユーザー指摘「左にかつかつ」） */
  --gutter:1.75rem;      /* 帯と本文の左右余白（同じ値＝右端・左端がそろう） */
  --zebra:rgba(222,222,209,.22); --zebra-hover:rgba(222,222,209,.35);   /* 表のゼブラ（#DEDED1 の 22%。ユーザー指示「もう少し薄く」）。hover は 35%＝見出し行より薄くゼブラより濃い（2026-09-26 ユーザー指示「hover が見出しと同じ色で区別できない」） */
  --rail:9.75rem; --band:3.5rem; --w:1400px;   /* 左の帯は 156px（アイコン＋ラベル。ユーザー指示「余裕をもたせて」） */   /* 帯の高さは文字に追随（文字サイズ 3 段階） */
  /* 旧名の別名 */
  --navy:var(--link); --navy-deep:var(--accent-deep); --crimson:var(--ng); --border:var(--line); --panel:var(--paper-2);
}

/* ── ダーク（ユーザー指示 2026-09-26「ダークモードの選択もできるように」）。
   既定はライト。OS の prefers-color-scheme は追わない（工場の PC が意図せず暗くならないように）。
   <html data-theme="dark"> を <head> 先頭のスクリプト（localStorage の sd_theme）が付ける。図面の画像は反転しない。 */
:root[data-theme="dark"]{
  --ground:#1e1c19;      /* 暖かみのある濃色 */
  --ground-2:#2c2a25;
  --paper:#2a2723;       /* カード・表・入力欄 */
  --paper-2:#34312b;
  --ink:#f2efe8;
  --ink-2:rgba(242,239,232,.82);
  --muted:rgba(242,239,232,.68);
  --faint:rgba(242,239,232,.52);
  --accent:#a58a68; --accent-hover:#b5977a; --accent-deep:#e6e1d6; --accent-tint:#3a362f; --accent-line:#5a554c;
  --link:#f2efe8;
  --green:var(--accent); --green-deep:var(--accent); --green-tint:var(--accent-tint);
  --marker:#b6ae9f;
  --line:#45423a; --line-w:#37342e; --line-strong:#77716a; --rule:#4a463f;
  --zebra:rgba(255,255,255,.025); --zebra-hover:rgba(255,255,255,.035);   /* 見出し（#34312b）より薄くゼブラより濃い */
  --ok:#f2efe8;   --ok-bg:#3a362f;  --ok-line:#5a554c;  --ok-text:#f2efe8;
  --warn:#f6d98f; --warn-bg:#3d3320; --warn-line:#6a5a2c; --warn-text:#f6d98f;
  --ng:#ffc9c3;   --ng-bg:#3d2a28;  --ng-line:#6a4a46;  --ng-text:#ffc9c3;
  --info-bg:#34312b;
  --on-accent:#111;   /* ダークは明るいブラウンに黒文字（6.7:1） */
  --band-bg:#26241f; --band-fg:#f2efe8; --band-line:#4a463f;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23f2efe8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --shadow-1:0 1px 2px rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.22);
  --shadow:0 12px 32px rgba(0,0,0,.5);
}
:root[data-theme="dark"] ::selection{ background:#5a554c; }
:root[data-theme="dark"] .sd-brand-tx, :root[data-theme="dark"] .sd-rail-brand-tx, :root[data-theme="dark"] .sd-login-app{ filter:brightness(1.25); }   /* ベージュのワードマークを暗い地でも見えるように */

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-color:#b6ae9f transparent; scroll-behavior:smooth; }
html{ color-scheme:light; }
html[data-theme="dark"]{ color-scheme:dark; }
/* 文字サイズ 3 段階（ユーザー指示 2026-09-26）: <html data-font="l|xl"> を <head> 先頭の sd_theme_head() が付ける。既定は標準 */
html[data-font="l"]{ font-size:112.5%; }
html[data-font="xl"]{ font-size:125%; }
body{ margin:0; background:var(--ground); color:var(--ink); font-family:var(--font); font-size:1rem; line-height:1.75; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--accent-tint); color:var(--ink); }
input, textarea, select, button{ caret-color:var(--ink); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
a{ color:var(--ink); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ color:var(--ink); text-decoration-thickness:2px; }
img{ max-width:100%; }
::placeholder{ color:var(--faint); opacity:1; }
.sd-num, .sd-code, time, .tbl td, .sd-paging, .sd-home-big, .sd-lot-dl dd, .sd-dt-dl dd, .sd-log-time{ font-variant-numeric:tabular-nums; }
.sd-ico{ width:24px; height:24px; flex:none; }

/* ── 上の帯（ブルー）: 左に「ズメカン｜伸栄鉄工」、右に氏名とログアウト ──────────────── */
.sd-head{ position:sticky; top:0; z-index:40; background:var(--band-bg); color:var(--band-fg); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }   /* 上端・下端の 1px 罫を左端から右端まで（左の帯は帯の下から始まるので下の線が通る） */
.sd-head-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--band); margin:0; padding:0 var(--gutter); }   /* 上の帯は画面の左端まで（ユーザー指示 2026-09-26）。右端の余白は本文と同じ --gutter */
.sd-brand{ display:inline-flex; align-items:center; gap:12px; color:var(--band-fg); text-decoration:none; white-space:nowrap; }
.sd-brand:hover{ color:var(--band-fg); }
.sd-brand-logo{ width:2.75rem; height:2.75rem; border-radius:9px; display:block; }   /* 左端＝--gutter。左の帯のアイコンの左端と同じ x */   /* PC はここの 1 つだけ（左の帯の四角は出さない・2026-09-26 リーダー点検） */   /* ユーザー提供のロゴ（角丸の生成り地は画像のまま。ダークでも反転しない） */
.sd-brand-tx{ display:block; height:1.75rem; width:auto; }   /* ワードマーク（ユーザー提供 wordmark-128.png）。高さ 28px・幅は自動 */
.sd-brand-co{ font-size:.8rem; font-weight:700; letter-spacing:.1em; line-height:1; padding-left:12px; border-left:1px solid var(--band-line); color:var(--band-fg); opacity:.9; }
.sd-head-search{ display:flex; align-items:center; gap:.5rem; flex:0 1 20rem; min-width:0; margin:0 auto; height:2.5rem; padding:0 .75rem; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--muted); }
.sd-head-search:focus-within{ border-color:var(--ink); }
.sd-head-search .sd-ico{ width:18px; height:18px; flex:none; }
.sd-head-search input{ flex:1 1 auto; min-width:0; height:auto; padding:0; border:0; background:transparent; color:var(--ink); font-size:.9rem; }
.sd-head-search input:focus{ outline:none; box-shadow:none; }
.sd-user{ position:relative; }
.sd-user-btn{ display:flex; align-items:center; gap:.5rem; list-style:none; cursor:pointer; min-height:2.75rem; padding:0 .5rem; border-radius:var(--r); user-select:none; }
.sd-user-btn::-webkit-details-marker{ display:none; }
.sd-user-btn:hover, .sd-user[open] .sd-user-btn{ background:var(--accent-tint); }
.sd-avatar{ display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:50%; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:.95rem; }
.sd-user-btn .sd-ico{ width:16px; height:16px; color:var(--muted); }
.sd-user-menu{ position:absolute; right:0; top:calc(100% + .35rem); z-index:50; min-width:16rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:.5rem; }
.sd-user-row{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.35rem .5rem; }
.sd-user-lbl{ font-size:.82rem; font-weight:700; color:var(--muted); }
.sd-user-menu .sd-theme, .sd-user-menu .sd-font button, .sd-user-menu .sd-font{ color:var(--ink); border-color:var(--line); }
.sd-user-link{ display:flex; align-items:center; gap:.5rem; min-height:2.75rem; padding:0 .5rem; border-radius:var(--r); color:var(--ink); text-decoration:none; font-weight:700; }
.sd-user-link:hover{ background:var(--accent-tint); }
.sd-user-link .sd-ico{ width:18px; height:18px; color:var(--muted); }
.sd-user-link + .sd-user-link{ margin-top:2px; }
.sd-user-menu > .sd-user-row + .sd-user-link{ margin-top:.35rem; padding-top:.35rem; border-top:1px solid var(--line-w); border-radius:0; }
.sd-userbox{ display:flex; align-items:center; gap:14px; font-size:.9rem; }
.sd-uname{ font-weight:700; color:var(--band-fg); }
.sd-logout{ display:inline-flex; align-items:center; height:2.75rem; padding:0 .75rem; border:1px solid var(--band-line); border-radius:var(--r); color:var(--band-fg); background:transparent; text-decoration:none; font-weight:700; font-size:.85rem; }
.sd-logout:hover{ background:var(--accent-tint); text-decoration:none; }

/* テーマ切替（ライト／ダーク）。帯の中は帯の色、ドロワーの中は本文の色。44px 以上 */
.sd-theme{ display:inline-flex; align-items:center; gap:6px; height:2.75rem; padding:0 .75rem; border:1px solid var(--band-line); border-radius:var(--r); background:transparent; color:var(--band-fg); font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.sd-theme:hover{ background:var(--accent-tint); }
.sd-theme .sd-ico{ width:20px; height:20px; }
.sd-theme .sd-ico-moon, html[data-theme="dark"] .sd-theme .sd-ico-sun{ display:none; }
html[data-theme="dark"] .sd-theme .sd-ico-moon{ display:block; }
.sd-theme .sd-theme-tx::after{ content:"ライト"; }
html[data-theme="dark"] .sd-theme .sd-theme-tx::after{ content:"ダーク"; }
.sd-theme .sd-theme-tx span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
html:not(.sd-js) .sd-theme{ display:none; }   /* JS 無効ならライトのまま（切替は出さない） */
.sd-login-theme{ position:absolute; top:16px; right:16px; color:var(--muted); border-color:var(--line); }
.sd-login-theme:hover{ background:var(--paper-2); }

/* 文字の大きさ（標準／大／特大）。テーマ切替の隣。選択中は #B6AE9F の面 */
/* 帯の中のボタン群（文字・ライト・ログアウト）は同じ高さ 2.75rem・1px 枠・同じ角丸（ユーザー指示「ボタンの大きさ合わせて」） */
.sd-font{ display:inline-flex; align-items:stretch; height:2.75rem; border:1px solid var(--band-line); border-radius:var(--r); overflow:hidden; }
.sd-font-cap{ display:inline-flex; align-items:center; height:100%; padding:0 .6rem; font-size:.78rem; font-weight:700; line-height:1; color:var(--band-fg); border-right:1px solid var(--band-line); }
.sd-font button{ display:inline-flex; align-items:center; justify-content:center; width:3rem; height:100%; padding:0; border:0; border-left:1px solid var(--band-line); background:transparent; color:var(--band-fg); font:inherit; font-weight:700; line-height:1; cursor:pointer; }   /* 3 つとも同じ幅・高さ。A の大きさは font-size だけ */
.sd-font button:first-of-type{ border-left:0; }
.sd-font button:hover{ background:var(--accent-tint); }
.sd-font button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); }
.sd-font .sd-font-m{ font-size:.85rem; } .sd-font .sd-font-l{ font-size:1rem; } .sd-font .sd-font-xl{ font-size:1.2rem; }
html:not(.sd-js) .sd-font{ display:none; }   /* JS 無効なら標準のまま */

/* ── 左の帯（PC）: アイコン＋小さな文字。今のページは白い四角で示す ───────────────── */
.sd-nav-d{ position:absolute; left:0; top:0; width:0; height:0; overflow:visible; }   /* PC: フローから外す（display:contents は <details> に効かず、空の flex 項目が右端を占めていた 2026-09-26） */
.sd-navbtn{ display:none; }
.sd-userbox-sp{ display:none; }
.sd-nav-panel{ position:fixed; left:0; top:calc(var(--band) + 2px); bottom:0; width:var(--rail); z-index:41; background:var(--band-bg); border-right:1px solid var(--band-line); display:flex; flex-direction:column; align-items:stretch; padding:0 8px 12px 8px; overflow-y:auto;   /* 右の 1px 罫のぶん右の余白を 1px 減らし、項目の中心を帯の中心 x=44 に */ scrollbar-width:none; }   /* 項目が 10 個あるので背の低い画面では帯の中でスクロール */
.sd-rail-brand{ display:none; align-items:center; justify-content:center; height:var(--band); color:var(--band-fg); text-decoration:none; font-size:1.35rem; font-weight:700; }
.sd-rail-brand img{ width:2.75rem; height:2.75rem; border-radius:9px; display:block; }
.sd-rail-brand-tx{ display:none; }   /* PC の帯では出さない（ドロワーの見出しだけ） */
.sd-nav{ display:flex; flex-direction:column; gap:4px; margin:16px 0 0; padding:0; flex:1 1 auto; }
.sd-nav a{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; min-height:3rem; padding:0 16px 0 20px; border-radius:8px; color:var(--band-fg); opacity:.92; text-decoration:none; font-size:.88rem; font-weight:700; letter-spacing:.02em; line-height:1.2; white-space:nowrap; }   /* 帯 156px・左右 8px の内側に幅いっぱいの色面、項目の padding 右 16px・左 20px（アイコンの左端＝ロゴの左端 x=28）、高さ 48px */
.sd-nav a:hover{ background:var(--accent-tint); opacity:1; }
.sd-nav a.is-active{ background:var(--accent-tint); color:var(--ink); opacity:1; position:relative; }   /* 選択中は薄いベージュの色面（モック） */
/* 選択中: 帯の左端に接する 4px のアクセントバー（--accent）。色面は左端まで伸ばし右だけ角丸（ユーザー指示「アクティブ」2026-09-26） */
.sd-nav a.is-active::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); }
@media (min-width:768px){ .sd-nav a.is-active{ margin-left:-8px; padding-left:28px; border-radius:0 8px 8px 0; } }
.sd-nav-gap{ flex:1 1 24px; min-height:24px; }   /* 管理グループの前の空き（最低 24px・余れば下寄せ）。sd_auth.php が <span class="sd-nav-gap"> を出す */
.sd-nav a.sd-nav-sys ~ a{ margin-top:0; }

/* ── 本文 ─────────────────────────────────────────────────────────────── */
.sd-main{ max-width:var(--w); margin:0 0 0 var(--rail); padding:1.375rem var(--gutter) 5rem; }
.sd-title{ font-size:1.75rem; font-weight:700; color:var(--ink); line-height:1.3; margin:0 0 20px; letter-spacing:.02em; overflow-wrap:anywhere; }
h2{ font-size:1rem; font-weight:700; color:var(--ink); margin:0 0 12px; line-height:1.4; letter-spacing:.04em; }
h3{ font-size:.95rem; font-weight:700; margin:0 0 6px; color:var(--ink); }
.sd-muted{ color:var(--muted); font-size:.88rem; }
.sd-sp-only{ display:none; }
html.sd-embed .sd-head, html.sd-embed .sd-nav-panel, html.sd-embed .sd-tabbar{ display:none; }
html.sd-embed .sd-main{ margin-left:0; padding-top:8px; }

/* お知らせ・状態 */
.note{ padding:10px 14px; margin:0 0 16px; font-size:.92rem; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }
.note.ok{ background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-text); }
.note.ng{ background:var(--ng-bg); border-color:var(--ng-line); color:var(--ng-text); }
.note.sd-note-warn{ background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-text); }
.ok, .ng{ display:inline-block; padding:0 7px; border-radius:var(--r); font-weight:700; line-height:1.6; }
.ok{ color:var(--ok-text); background:var(--ok-bg); }
.ng{ color:var(--ng-text); background:var(--ng-bg); }

/* ── 表: 白い面に淡い見出し行、行は薄い罫（参考 2） ───────────────────────────── */
.tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 20px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); }
.tbl{ border-collapse:collapse; width:100%; font-size:.92rem; }
/* 2026-09-26 ユーザー指示「境目に罫線入れて」: 見出しの下 1px #C5C7BC・行と行 1px #DEDED1（ゼブラの上でも見える）・表の下端 1px #C5C7BC。縦罫なし。
   .tblwrap の中では枠線が下端の線を兼ねる（二重線にしない）。ダークは同じ役割の暗い色（下の :root[data-theme="dark"]） */
:root{ --tbl-head:#C5C7BC; --tbl-row:#DEDED1; --card-head:#F3F0E6; }
:root[data-theme="dark"]{ --tbl-head:#5a554c; --tbl-row:#3d3a33; --card-head:#34312b; }
.tbl th, .tbl td{ padding:.7rem .625rem; text-align:left; vertical-align:middle; border-bottom:1px solid var(--tbl-row); }
.tbl tbody tr:last-child td{ border-bottom:1px solid var(--tbl-head); }
.tblwrap > .tbl tbody tr:last-child td{ border-bottom:0; }
.sd-card .tblwrap > .tbl tbody tr:last-child td{ border-bottom:1px solid var(--tbl-head); }   /* カードの中の表は枠が無いので下端の線を引く */
.tbl thead th{ background:var(--paper-2); font-weight:700; font-size:.82rem; color:var(--ink-2); white-space:nowrap; letter-spacing:.04em; border-bottom:1px solid var(--tbl-head); }
.tbl tbody tr:nth-child(even){ background:var(--zebra); }   /* ゼブラ（ユーザー要望） */
.tbl tbody tr:hover{ background:var(--zebra-hover); }
.tbl th.act, .tbl td.act{ width:1%; white-space:nowrap; padding-left:8px; padding-right:8px; }
.tbl th.col-eq{ width:14%; }
.tbl input, .tbl select{ width:100%; min-width:80px; padding:0 var(--pad-input); font:inherit; font-size:.95rem; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--paper); color:var(--ink); }
.tbl input[type="date"]{ min-width:140px; }
.tbl input:focus, .tbl select:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--accent-tint); }
.sd-stamp-thumb{ display:inline-block; object-fit:contain; vertical-align:middle; background:var(--paper); border:1px solid var(--line); }

/* カードの中の表は枠と影を重ねない（二重枠を作らない） */
.sd-card .tblwrap{ border:0; box-shadow:none; border-radius:0; background:transparent; }
.sd-card .tbl thead th{ border-top:1px solid var(--line-w); }

/* 表の列: 図番・ロットNo・日付・版・状態・数は折り返さない（.nw）。顧客・品名だけ可変幅（2026-09-26 リーダー点検） */
.tbl td.nw, .tbl th.nw{ white-space:nowrap; }
@media (max-width:640px){ .tbl-cards td.nw{ white-space:normal; } }

/* ── カード（白・薄い影）・フォーム ───────────────────────────────────────── */
.sd-card{ border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--pad-card); margin:0 0 22px; background:var(--paper); box-shadow:var(--shadow-1); max-width:560px; }
/* カードの見出し帯（2026-09-26 ユーザー指示「枠のタイトルがわかりやすいように罫線、タイトル行は薄い背景に」）。表の見出し行と同じ作法:
   カードの上端いっぱいに #F3F0E6 の帯、下に 1px #C5C7BC、中に見出し（太字 1.05rem）と右のボタン。どの画面でも**カードの最初の見出し**に効かせる
   （h2・.sd-od-h2row・.sd-card-h）。margin を !important にするのは、ロット詳細などの h2 がインラインで margin を持っているため。 */
.sd-card > h2:first-child, .sd-card > .sd-od-h2row:first-child, .sd-card > .sd-card-h:first-child{
  margin:calc(-1 * var(--pad-card)) calc(-1 * var(--pad-card)) 1rem !important; padding:.75rem var(--pad-card);
  background:var(--card-head); border-bottom:1px solid var(--tbl-head); border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  font-size:1.05rem !important; font-weight:700; line-height:1.4; }
.sd-card > .sd-od-h2row:first-child h2{ font-size:1.05rem; }
.sd-card > h2:first-child, .sd-card > .sd-fold > summary h2{ margin-bottom:14px; }
.sd-card-full{ max-width:none; }
.sd-card-wide{ max-width:900px; }
.sd-subhead{ font-size:.95rem; font-weight:700; color:var(--ink); margin:20px 0 8px; padding:12px 0 0; border-top:1px solid var(--line-w); letter-spacing:.04em; }

.sd-field{ display:block; margin:0 0 1rem; }
.sd-field > span{ display:block; font-size:.82rem; font-weight:700; color:var(--ink-2); margin:0 0 .375rem; }
.sd-field input, .sd-field select, .sd-field textarea, .sd-searchbar input[type="search"]{ width:100%; min-height:2.75rem; padding:.5rem var(--pad-input); font:inherit; font-size:1rem; line-height:1.4; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--paper); color:var(--ink); }
.sd-field textarea{ min-height:4rem; resize:vertical; }
.sd-field input[type="file"]{ padding:8px 10px; font-size:.92rem; }
.sd-field input:focus, .sd-field select:focus, .sd-field textarea:focus, .sd-searchbar input[type="search"]:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--accent-tint); }
.sd-field input:disabled, .sd-field select:disabled, .sd-field textarea:disabled{ background:var(--paper-2); color:var(--muted); }
select{ background-color:var(--paper); }
/* 入力欄と select とボタンは同じ高さ 2.75rem（ユーザー指摘「縦幅そろっていない」）。min-height でなく height で固定し、
   select は OS 既定の見た目をやめて自前の矢印（--chev）にする＝ブラウザ差で高さが変わらない。textarea・チェック・ファイルは除く */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]), select:not([multiple]):not([size]){
  box-sizing:border-box; height:2.75rem; padding:0 var(--pad-input); line-height:normal; font:inherit; font-size:1rem;
}
select:not([multiple]):not([size]){ appearance:none; -webkit-appearance:none; padding-right:2rem; background-image:var(--chev); background-repeat:no-repeat; background-position:right .6rem center; background-size:.8rem .8rem; }
select::-ms-expand{ display:none; }
input[type=number]{ -moz-appearance:textfield; }
.sd-check{ display:flex; align-items:center; gap:10px; margin:0 0 16px; min-height:2.75rem; font-size:.95rem; font-weight:700; cursor:pointer; }
.sd-check input{ width:22px; height:22px; accent-color:var(--ink); flex:none; margin:0; }
input[type="checkbox"], input[type="radio"]{ accent-color:var(--ink); }
.sd-req{ color:var(--ng); font-weight:700; }

.sd-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; align-items:center; }
.sd-actions > .sd-btn-right{ margin-left:auto; }
.sd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:2.75rem; padding:0 18px; font:inherit; font-size:.95rem; font-weight:700; line-height:1.3; border:1px solid var(--accent-line); border-radius:var(--r); background:var(--paper); color:var(--ink); text-decoration:none; cursor:pointer; transition:background-color .15s, color .15s, border-color .15s; }
.sd-btn:hover{ background:var(--accent-tint); border-color:var(--ink); color:var(--ink); text-decoration:none; }
.sd-btn:active{ background:var(--line-w); }
.sd-btn:disabled, .sd-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.sd-btn-primary{ background:var(--accent); border-color:var(--accent-hover); color:var(--on-accent); }   /* 面より少し濃い 1px の枠＝副ボタンと同じ外形・同じ輪郭 */
.sd-btn-primary:hover{ background:var(--accent-hover); border-color:var(--accent-deep); color:var(--on-accent); }
.sd-btn-small{ min-height:2.25rem; padding:0 12px; font-size:.85rem; }
.sd-btn .sd-ico{ width:1rem; height:1rem; }
.sd-btn-icon{ width:2.75rem; padding:0; }   /* アイコンだけのボタン（⋮ など） */
.sd-btn-small.sd-btn-icon{ width:2.25rem; }
.sd-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin:0 0 .5rem; font-size:.85rem; color:var(--muted); }
.sd-crumbs a{ color:var(--muted); }
.sd-crumbs [aria-current]{ color:var(--ink); font-weight:700; }
.sd-title-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; margin:0 0 20px; }
.sd-title-row .sd-title{ margin:0; }
.sd-title-actions{ display:flex; flex-wrap:wrap; gap:.5rem; }
.sd-btn-danger, .sd-btn.sd-btn-del{ color:var(--ink); border-color:var(--ng-line); background:var(--ng-bg); }
.sd-btn-danger:hover, .sd-btn.sd-btn-del:hover{ background:var(--ng-line); border-color:var(--ng-line); color:var(--ink); }

/* ── ログイン ──────────────────────────────────────────────────────────── */
.sd-login-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; min-height:100dvh; background:var(--ground); padding:24px 16px; }
.sd-login-card{ width:100%; max-width:400px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:30px 30px 28px; }
.sd-login-brand{ margin:0 0 24px; padding:0 0 18px; border-bottom:1px solid var(--line-w); display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.sd-login-brand .sd-login-app{ display:block; height:2.5rem; width:auto; }   /* ワードマーク 40px */
.sd-login-brand .sd-login-co{ display:block; margin-top:8px; font-size:.84rem; font-weight:700; color:var(--muted); letter-spacing:.1em; }
.sd-login-art{ flex:none; width:72px; height:72px; border-radius:12px; }
.sd-login-err{ margin:14px 0 0; padding:10px 12px; background:var(--ng-bg); border:1px solid var(--ng-line); border-radius:var(--r); color:var(--ng-text); font-size:.9rem; font-weight:700; }
.sd-login-card .sd-btn-primary{ width:100%; min-height:3rem; font-size:1.02rem; margin-top:4px; }

/* ── 検索バー・絞り込みの札・ページ送り ─────────────────────────────────── */
.sd-searchbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; }
.sd-searchbar input[type="search"]{ flex:1 1 200px; width:auto; }
.sd-searchbar-half input[type="search"]{ flex:0 1 50%; }
@media (max-width:640px){ .sd-searchbar-half input[type="search"]{ flex:1 1 200px; } }

.sd-filter{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.sd-filter-btn{ display:inline-flex; align-items:center; min-height:2.375rem; padding:0 14px; border:1px solid var(--accent-line); border-radius:var(--r); text-decoration:none; color:var(--ink); background:var(--paper); font-size:.9rem; font-weight:700; font-variant-numeric:tabular-nums; }
.sd-filter-btn:hover{ background:var(--accent-tint); border-color:var(--ink); color:var(--ink); }
.sd-filter-btn.is-on{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.sd-filter-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 12px; }
.sd-filter-row > .sd-filter{ margin:0; }
.sd-filter-cap{ flex:0 0 100%; font-size:.78rem; font-weight:700; color:var(--muted); margin:0 0 -2px 2px; }
.sd-filter-row > .sd-filter + .sd-filter{ border-left:1px solid var(--line); padding-left:14px; }
@media (max-width:640px){ .sd-filter-row > .sd-filter + .sd-filter{ border-left:0; padding-left:0; } }

.sd-paging{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin:0 0 12px; font-size:.9rem; color:var(--muted); }
.sd-paging-count b{ color:var(--ink); font-size:1.05rem; }
.sd-paging-per{ margin:0; display:inline; }
.sd-paging-per select{ padding:0 8px; font:inherit; font-size:.9rem; margin-left:4px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--paper); color:var(--ink); }
.sd-paging-nav{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.sd-paging-nav a, .sd-paging-nav span{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; min-height:2.375rem; padding:0 10px; border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:var(--ink); background:var(--paper); font-variant-numeric:tabular-nums; }
.sd-paging-nav a:hover{ border-color:var(--ink); color:var(--ink); }
.sd-paging-nav .cur{ background:var(--green-deep); color:var(--on-accent); border-color:var(--green-deep); font-weight:700; }   /* 参考 1 の「1/4」＝緑の四角に白抜き */
.sd-paging-nav .dis{ color:var(--faint); background:var(--paper-2); }
.sd-paging-nav .gap{ border:0; min-width:auto; padding:0 2px; background:transparent; }

.sd-fold > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; user-select:none; min-height:2.25rem; }
.sd-fold > summary::-webkit-details-marker{ display:none; }
.sd-fold > summary::before{ content:""; width:8px; height:8px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(-45deg); transition:transform .15s; flex:none; }
.sd-fold[open] > summary::before{ transform:rotate(45deg); }
.sd-fold > summary h2{ margin:0; }
.sd-fold:not([open]){ padding-bottom:16px; }

/* ── タブ（図面詳細）: 下に薄い罫、今のタブは黄色のマーカー（参考 1 の強調） ──────── */
.sd-tabs{ display:flex; flex-wrap:wrap; gap:0 4px; border-bottom:1px solid var(--line); margin:0 0 16px; }
.sd-tab-btn{ display:inline-flex; align-items:center; min-height:2.75rem; padding:0 12px; border:0; background:transparent; color:var(--ink-2); font:inherit; font-size:.95rem; font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sd-tab-btn:hover{ color:var(--ink); background:var(--paper-2); text-decoration:none; }
.sd-tab-btn.is-on{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink); }
a.sd-tab-btn{ text-decoration:none; }
.sd-tab-panel[hidden]{ display:none !important; }

/* ── ポップアップ入力 <dialog class="sd-modal"> ─────────────────────────── */
dialog.sd-modal{ width:min(920px, calc(100vw - 24px)); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); color:var(--ink); background:var(--paper); }
dialog.sd-modal::backdrop{ background:rgba(40,36,28,.45); }
dialog.sd-modal.sd-modal-wide{ width:min(1200px, calc(100vw - 24px)); }
.sd-modal-head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--paper); padding:14px 20px; border-bottom:1px solid var(--line-w); }
.sd-modal-head h2{ margin:0; color:var(--ink); font-size:1.1rem; }
.sd-modal-x{ border:1px solid var(--accent-line); border-radius:var(--r); background:var(--paper); font-size:1.4rem; line-height:1; color:var(--ink); cursor:pointer; min-width:40px; min-height:2.5rem; }
.sd-modal-x:hover{ background:var(--accent-tint); }
dialog.sd-modal > form{ padding:18px 20px 20px; }
.sd-modal-flash{ padding:14px 20px 0; }
.sd-modal-flash > :last-child{ margin-bottom:0; }
dialog.sd-modal > section.sd-card{ margin:0 20px 20px; }
.sd-modal-body{ padding:18px 20px 20px; }
@media (max-width:640px){ dialog.sd-modal, dialog.sd-modal.sd-modal-wide{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; } }

.sd-list{ margin:6px 0 0; padding:0 0 0 1.2em; }
.sd-list li{ margin:3px 0; }

/* ── ホーム: 数字のタイル（参考 2）＋図面の列 ─────────────────────────────── */
.sd-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0; margin:0 0 22px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); overflow:hidden; }
.sd-stat{ padding:18px 22px 16px; border-right:1px solid var(--line); min-width:0; }
.sd-stat:last-child{ border-right:0; }
.sd-stat-h{ font-size:.86rem; font-weight:700; color:var(--ink-2); margin:0 0 6px; letter-spacing:.04em; }
.sd-stat-n{ font-size:2.4rem; font-weight:700; line-height:1.1; margin:0 0 8px; font-variant-numeric:tabular-nums; color:var(--ink); display:flex; align-items:baseline; gap:6px; }
.sd-stat-n a{ text-decoration:none; color:inherit; }
.sd-stat-n a:hover{ color:var(--ink); }
.sd-stat-n small{ font-size:.9rem; font-weight:700; color:var(--muted); }
.sd-stat-n.is-warn{ color:var(--warn); }
.sd-stat-n.is-ng{ color:var(--ng); }
.sd-stat-n.is-zero{ color:var(--muted); }
.sd-stat-sub{ margin:0; font-size:.86rem; line-height:1.7; color:var(--ink-2); }
.sd-stat-sub a{ margin-left:4px; }
.sd-home-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin:0 0 26px; }
.sd-home-grid > .sd-card{ margin:0; max-width:none; }
.sd-home-h{ font-size:.95rem; font-weight:700; color:var(--ink); margin:0 0 10px; letter-spacing:.04em; }
.sd-home-big{ font-size:2rem; font-weight:700; margin:0 0 8px; line-height:1.1; display:flex; align-items:center; gap:10px; }
.sd-home-big a{ display:inline-flex; align-items:center; justify-content:center; min-width:2.2em; min-height:2.2em; padding:0 .3em; background:var(--green-deep); color:var(--on-accent); text-decoration:none; border-radius:var(--r); }
.sd-home-big span{ font-size:.92rem; font-weight:700; color:var(--ink-2); }
.sd-home-mid{ font-size:1.05rem; font-weight:700; margin:0 0 6px; font-variant-numeric:tabular-nums; }
.sd-home-list{ margin:0; padding-left:1.1em; font-size:.92rem; line-height:1.9; }
.sd-home-sec{ margin:0 0 26px; }
.sd-home-more{ float:right; font-size:.85rem; font-weight:400; }
.sd-home-orders{ font-size:.92rem; }
.sd-home-menu{ max-width:640px; }
.sd-home-menu ul{ margin:0; padding-left:1.2em; line-height:2; font-size:.95rem; }
.sd-hscroll{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
@media (max-width:767px){ .sd-hscroll{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; } }
.sd-mini{ flex:0 0 156px; width:156px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper); color:inherit; text-decoration:none; font-size:.82rem; line-height:1.45; }
.sd-mini:hover{ border-color:var(--ink); text-decoration:none; color:inherit; }
.sd-mini-th{ aspect-ratio:4 / 3; overflow:hidden; background:var(--paper); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line-w); }
.sd-mini-th img{ width:100%; height:100%; object-fit:contain; display:block; }
.sd-mini-none{ color:var(--muted); }
.sd-mini-no{ font-weight:700; color:var(--ink); padding:5px 8px 0; word-break:break-all; font-variant-numeric:tabular-nums; }
.sd-mini-cu, .sd-mini-nt{ padding:0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sd-mini-nt{ color:var(--muted); padding-bottom:6px; }
.sd-mini-cu:last-child{ padding-bottom:6px; }
.sd-mini-unknown, .sd-dw-unknown{ color:var(--warn); font-weight:700; }

/* ── 状態の札（図面・版・ロット）。各画面の <style> より先に読まれるので、そちらの同名指定は消してある ── */
.sd-dw-st, .sd-dt-tag, .sd-lot-st, .sd-le-tag{ display:inline-block; padding:1px 8px; border-radius:var(--r); font-size:.75rem; font-weight:700; line-height:1.5; border:1px solid; white-space:nowrap; vertical-align:middle; }
.sd-dw-st.is-active, .sd-dt-tag.is-cur{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); }
.sd-dw-st.is-obsolete{ background:var(--ng-bg); color:var(--ng); border-color:var(--ng-line); }
.sd-dw-st.is-archived{ background:var(--paper); color:var(--muted); border-color:var(--line); }
.sd-dt-tag.is-old{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }
.sd-lot-st.is-open{ background:var(--paper); color:var(--ink); border-color:var(--line-strong); }
.sd-lot-st.is-shipped{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); }
/* Task 20: 見積中（ユーザー指定 #DEDED1 の札に黒文字。要確認ではないので琥珀は使わない。出荷済みと見分けるため枠だけ破線） */
.sd-lot-st.is-quote{ background:#DEDED1; color:#111; border-color:#b6ae9f; border-style:dashed; }
/* Task 20: 赤い PDF のマーク（sd_icon_pdf・sd_lib.php）。色は SVG の中に固定（ダークでも同じ赤＝一般的な識別色として例外）。ボタンの中では線画の .sd-ico と同じ並び */
/* Task 21: 種別ごとのマーク（sd_icon_file）も同じ形・同じ並び。PDF のマークは sd-ico-file と sd-ico-pdf の両方を持つ */
.sd-ico-pdf, .sd-ico-file{ flex:none; display:inline-block; vertical-align:middle; }
.sd-btn:has(> .sd-ico-pdf), .sd-btn:has(> .sd-ico-file){ padding-left:8px; gap:8px; }   /* ユーザー指定: PDF のマークのボタンは左 8px・マークと文字の間 8px（高さは変えない） */
/* 読み上げだけに出す文字（表の見出しの「削除」など） */
.sd-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── Task 22: 見積書・請求書の明細（sd_doc_lines_table_html・sd_doc_lines_editor_html）───────────────────────────
   表は共通 .tbl の作法（見出し --paper-2・横罫）。金額・単価・数量は右寄せ tabular-nums、下に合計の行。食い違いは薄い琥珀の一言。 */
details.sd-lines{ margin:.35rem 0 0; }
details.sd-lines > summary{ cursor:pointer; display:inline-flex; align-items:center; min-height:2.25rem; font-size:.88rem; font-weight:700; color:var(--ink); }
details.sd-lines[open] > summary{ margin:0 0 .35rem; }
.sd-lines-tbl, .sd-lines-edtbl{ font-size:.9rem; }
.sd-lines-tbl .sd-num, .sd-lines-edtbl .sd-num, .sd-lines-edtbl input.sd-num{ text-align:right; white-space:nowrap; }
.sd-lines-tbl td, .sd-lines-tbl th{ padding:.4rem .6rem; }
.sd-lines-tbl td:first-child, .sd-lines-tbl th:first-child{ min-width:8em; }   /* 狭い枠（390 の 2 列のカード）で品名が 1 字ずつ折れた＝最小幅を持たせ、足りなければ .tblwrap の中で横に送る */
.sd-lines-tbl tfoot td{ font-weight:700; border-top:1px solid var(--tbl-head, var(--line)); background:var(--paper-2); }
.sd-lines-sumlbl{ text-align:right; }
.sd-lines-warn{ margin:.4rem 0 0; padding:.3rem .6rem; background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:var(--r); color:var(--warn-text); font-size:.85rem; }
.sd-lines-warn[hidden]{ display:none; }
.sd-lines-ed{ margin:.25rem 0 1rem; }
.sd-lines-edhead{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.25rem 1rem; margin:0 0 .35rem; }
.sd-lines-edtitle{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem; }
.sd-lines-edsum{ font-size:.88rem; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.sd-lines-edtbl td{ padding:.3rem .35rem; vertical-align:middle; }
.sd-lines-edtbl input{ width:100%; min-width:0; height:2.5rem; box-sizing:border-box; }
.sd-lines-edtbl td:nth-child(1){ min-width:10rem; }
.sd-lines-edtbl td:nth-child(2), .sd-lines-edtbl td:nth-child(3){ width:5.5rem; }
.sd-lines-edtbl td:nth-child(4), .sd-lines-edtbl td:nth-child(5){ width:7.5rem; }
.sd-lines-edtbl td.act{ width:2.75rem; text-align:right; }
.sd-lines-edtbl tr.is-ai input{ background:var(--warn-bg); border-color:var(--warn-line); }
.sd-lines-ed > .sd-btn{ margin:.5rem 0 0; }
.sd-lines-deltx{ display:none; }   /* 390 のカードでは全幅のボタンになるので文字を出す（PC は × だけ） */
@media (max-width:640px){
  .sd-lines-edtbl td:nth-child(n){ width:auto; min-width:0; }
  .sd-lines-edtbl.tbl-cards td{ padding-top:4px; padding-bottom:4px; }
  .sd-lines-edtbl.tbl-cards td.act{ margin:6px 0 0; padding:6px 0 0; }
  .sd-lines-edtbl .sd-lines-deltx{ display:inline; margin-left:.35rem; font-size:.85rem; }
}

/* ── Task 23: 写真の縮小画像の列とライトボックス（assets/app.js の sdLightbox）─────────────────────────────
   縮小画像は横に並べ、はみ出したら横スクロール（行は 1 行）。押すとその場で拡大。position:fixed を使うのはライトボックスだけ。 */
.sd-thumbstrip{ display:flex; gap:.5rem; overflow-x:auto; padding:.25rem 0 .5rem; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.sd-thumbstrip a{ flex:none; display:block; width:6.5rem; aspect-ratio:4 / 3; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); overflow:hidden; }
.sd-thumbstrip a:hover, .sd-thumbstrip a:focus-visible{ border-color:var(--ink); }
.sd-thumbstrip img{ width:100%; height:100%; object-fit:cover; display:block; }
.sd-lb{ position:fixed; inset:0; z-index:2000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
        background:rgba(17,17,17,.86); padding:3.25rem 3.5rem 1rem; box-sizing:border-box; }
.sd-lb[hidden]{ display:none; }
.sd-lb-img{ max-width:100%; max-height:calc(100vh - 8.5rem); width:auto; height:auto; object-fit:contain; background:#fff; border-radius:4px; box-shadow:0 8px 40px rgba(0,0,0,.45); }
.sd-lb-err{ margin:0; padding:1rem 1.25rem; max-width:30rem; background:#fff; color:#111; border-radius:var(--r-lg); font-weight:700; text-align:center; }   /* 点検後の修正 L4 */
.sd-lb-err[hidden], .sd-lb-img[hidden]{ display:none; }
.sd-lb-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem 1rem; color:#f2efe8; font-size:.9rem; font-variant-numeric:tabular-nums; }
.sd-lb-bar a{ color:#f2efe8; text-decoration:underline; }
.sd-lb-btn{ position:absolute; display:flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; border:1px solid rgba(255,255,255,.35);
            border-radius:50%; background:rgba(0,0,0,.35); color:#fff; font:700 1.4rem/1 sans-serif; cursor:pointer; }
.sd-lb-btn:hover, .sd-lb-btn:focus-visible{ background:rgba(255,255,255,.18); outline:2px solid #fff; outline-offset:2px; }
.sd-lb-btn[hidden]{ display:none; }
.sd-lb-x{ top:.5rem; right:.5rem; }
.sd-lb-prev{ left:.5rem; top:50%; transform:translateY(-50%); }
.sd-lb-next{ right:.5rem; top:50%; transform:translateY(-50%); }
html.sd-lb-open{ overflow:hidden; }
@media (max-width:640px){
  .sd-lb{ padding:3.25rem .5rem 1rem; }
  .sd-lb-prev, .sd-lb-next{ top:auto; bottom:.75rem; transform:none; }
  .sd-lb-img{ max-height:calc(100vh - 10rem); }
}
/* ⋮ メニュー（assets/app.js の sdMenu。2026-09-26）。開くときに body 直下へ移して position:fixed で出す＝表の枠（.tblwrap の overflow）で切られない。
   z-index は上の帯（sticky）より上 */
.sd-menu{ position:fixed; z-index:1000; min-width:12rem; max-width:calc(100vw - 16px); background:var(--paper); border:1px solid var(--line);
          border-radius:var(--r-lg); box-shadow:var(--shadow); padding:.35rem; }
.sd-menu[hidden]{ display:none; }
.sd-menu form{ margin:0; }
.sd-menu a, .sd-menu button{ display:flex; align-items:center; gap:.5rem; width:100%; box-sizing:border-box; min-height:2.75rem; padding:0 .6rem; border:0;
          border-radius:var(--r); background:none; color:var(--ink); font:inherit; font-weight:700; white-space:nowrap; text-decoration:none; cursor:pointer; text-align:left; }
.sd-menu a:hover, .sd-menu button:hover, .sd-menu a:focus-visible, .sd-menu button:focus-visible{ background:var(--accent-tint); }
.sd-menu .sd-ico{ width:16px; height:16px; color:var(--muted); }
/* ドラッグ＆ドロップ・貼り付けの受け口（assets/drop.js。2026-09-26 Task 20 追加）。破線の枠・重ねている間は薄いベージュ。390 は説明 1 行＋ボタン 2 つ */
.sd-drop{ margin:.75rem 0 0; padding:1rem; border:1px dashed var(--line-strong); border-radius:var(--r-lg); background:var(--paper); }
.sd-drop.is-over{ background:var(--accent-tint); border-color:var(--ink); }
.sd-drop-msg{ margin:0 0 .625rem; color:var(--ink-2); font-size:.92rem; }
.sd-drop .sd-actions, .sd-drop .sd-odp-cam{ margin:0; }
.sd-drop label.sd-btn{ position:relative; overflow:hidden; }
.sd-drop input[type=file]{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.sd-drop-err{ margin:.5rem 0 0; font-size:.85rem; font-weight:700; }
.sd-drop-err[hidden]{ display:none; }
@media (max-width:640px){ .sd-drop{ padding:.75rem; } .sd-drop-msg{ font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }
.sd-le-tag.is-manual{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }
.sd-le-tag.is-auto{ background:var(--paper); color:var(--ink); border-color:var(--line-strong); }

/* ── 類似図面 ─────────────────────────────────────────────────────────── */
.sd-sim-modes{ display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin:0 0 10px; }
.sd-sim-modehelp{ font-size:.8rem; }
.sd-sim-base{ margin:0 0 10px; font-size:.9rem; }
.sd-sim-base > summary{ cursor:pointer; font-weight:700; color:var(--ink); min-height:2.25rem; display:flex; align-items:center; }
.sd-sim-feat{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:2px 14px; margin:6px 0 0; font-size:.9rem; }
.sd-sim-feat dt{ color:var(--muted); font-weight:700; font-size:.78rem; }
.sd-sim-feat dd{ margin:0 0 4px; }
.sd-sim-lead{ margin:0 0 8px; font-size:.86rem; }
.sd-sim-list{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:8px; }
.sd-sim-row{ display:grid; grid-template-columns:150px minmax(0, 1fr); gap:12px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); padding:8px; }
.sd-sim-row.is-below{ opacity:.7; border-style:dashed; }
.sd-sim-th{ aspect-ratio:1.414 / 1; overflow:hidden; background:var(--paper); display:flex; align-items:center; justify-content:center; border-radius:var(--r); border:1px solid var(--line-w); }
.sd-sim-th img{ width:100%; height:100%; object-fit:contain; display:block; }
.sd-sim-body{ min-width:0; font-size:.9rem; line-height:1.55; }
.sd-sim-top{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.sd-sim-no{ font-weight:700; font-size:1rem; color:var(--ink); word-break:break-all; font-variant-numeric:tabular-nums; }
.sd-sim-score{ display:inline-block; padding:0 8px; border-radius:var(--r); background:var(--accent-tint); color:var(--ink); border:1px solid var(--accent-line); font-weight:700; font-size:.8rem; font-variant-numeric:tabular-nums; }
.sd-sim-mix{ font-size:.78rem; }
.sd-sim-low{ font-size:.75rem; color:var(--warn); }
.sd-sim-meta{ word-break:break-all; }
.sd-sim-parts{ color:var(--muted); font-size:.8rem; }
.sd-sim-lot{ font-size:.84rem; word-break:break-all; }
.sd-sim-rerank{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin:8px 0 0; }
.sd-sim-rerank .sd-muted{ font-size:.8rem; }
.sd-sim-fold > summary{ cursor:pointer; font-weight:700; color:var(--ink); font-size:.92rem; min-height:2.25rem; display:flex; align-items:center; flex-wrap:wrap; gap:0 6px; }
.sd-sim-fold > summary .sd-muted{ font-weight:400; font-size:.8rem; }
.sd-sim-list.is-compact{ flex-direction:row; flex-wrap:wrap; margin:8px 0 0; }
.sd-sim-list.is-compact .sd-sim-row{ flex:1 1 240px; max-width:340px; grid-template-columns:96px minmax(0, 1fr); gap:8px; padding:6px; }
.sd-sim-list.is-compact .sd-sim-no{ font-size:.9rem; }
.sd-simp-form{ max-width:560px; }
.sd-simp-form input[type=file]{ width:100%; }
.sd-simp-pick{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; margin:0 0 .75rem; padding:.5rem; border:1px solid var(--line-w); border-radius:var(--r); background:var(--paper); }
.sd-simp-pick[hidden]{ display:none; }
.sd-simp-th{ flex:none; width:6rem; height:6rem; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--line-w); border-radius:var(--r); background:#fff; }
.sd-simp-th img{ width:100%; height:100%; object-fit:contain; }
.sd-simp-nm{ flex:1 1 8rem; min-width:0; overflow-wrap:anywhere; }
.sd-simp-form .sd-drop{ margin:0 0 .75rem; }
.sd-simp-form .sd-field[hidden]{ display:none; }   /* JS が枠を出したら元の欄を隠す（.sd-field の display:block が hidden に勝つため） */
.sd-simp-result{ margin:16px 0 0; }
@media (max-width:767px){
  .sd-sim-row{ grid-template-columns:minmax(0, 1fr); gap:6px; }
  .sd-sim-th{ max-height:220px; }
  .sd-sim-list.is-compact{ flex-direction:column; }
  .sd-sim-list.is-compact .sd-sim-row{ max-width:none; flex:0 0 auto; grid-template-columns:96px minmax(0, 1fr); }
  .sd-sim-modes .sd-btn{ flex:1 1 auto; justify-content:center; text-align:center; }
}

/* スマホの下タブ（PC では出さない） */
.sd-tabbar{ display:none; }

/* ══════════════════════════════════════════════════════════════════════════
   スマホ（767px 未満: 上の帯＋ドロワー＋下タブ／640px 未満: 表をカードに）
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  :root{ --gutter:.875rem; }
  .sd-head-in{ padding:0 var(--gutter); gap:10px; }
  .sd-brand{ overflow:hidden; }
  .sd-brand-tx{ height:1.375rem; }   /* 390 は 22px */
  .sd-brand-co{ display:none; }
  .sd-brand-logo{ display:none; }   /* スマホはドロワーの見出しの 1 つだけ */
  .sd-userbox-pc{ display:none; }
  .sd-head-search{ display:none; }
  .sd-main{ margin:0; padding:1rem var(--gutter) calc(4.5rem + env(safe-area-inset-bottom)); }

  .sd-nav-d{ position:static; width:auto; height:auto; display:block; }
  .sd-navbtn{ display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; user-select:none; min-height:2.5rem; padding:0 12px; margin:0; border:1px solid var(--band-line); border-radius:var(--r); background:transparent; color:var(--band-fg); font-size:.85rem; font-weight:700; white-space:nowrap; }
  .sd-navbtn::-webkit-details-marker{ display:none; }
  .sd-navbtn-bars{ position:relative; width:18px; height:2px; border-radius:1px; background:currentColor; }
  .sd-navbtn-bars::before, .sd-navbtn-bars::after{ content:""; position:absolute; left:0; width:18px; height:2px; border-radius:1px; background:currentColor; }
  .sd-navbtn-bars::before{ top:-6px; }
  .sd-navbtn-bars::after{ top:6px; }
  .sd-nav-d[open] .sd-navbtn{ background:var(--accent-tint); color:var(--ink); border-color:var(--line); }

  /* ドロワー: 帯の下に重ねる（JS あり）。JS 無しなら帯の下に普通に積む */
  .sd-nav-panel{ position:static; width:auto; background:var(--paper); color:var(--ink); padding:0; display:block; border-right:0; }
  .sd-js .sd-nav-panel{ position:fixed; left:0; right:0; top:calc(var(--band) + 2px); bottom:auto; z-index:41; max-height:calc(100vh - var(--band) - 2px - 3.625rem - env(safe-area-inset-bottom)); overflow-y:auto;   /* 下タブに重ねない */ -webkit-overflow-scrolling:touch; box-shadow:var(--shadow); border-bottom:1px solid var(--line); }
  html:not(.sd-js) .sd-head-in{ flex-wrap:wrap; align-items:flex-start; }
  html:not(.sd-js) .sd-nav-d{ flex:0 0 100%; }
  /* ドロワーの見出し: ロゴ＋名前 */
  .sd-rail-brand{ display:flex; justify-content:flex-start; gap:10px; height:auto; padding:.75rem var(--gutter) .25rem; color:var(--ink); text-decoration:none; font-weight:700; }
  .sd-rail-brand img:not(.sd-rail-brand-tx){ width:2rem; height:2rem; border-radius:7px; }   /* ロゴマークだけ（ワードマークは高さ 22px・幅は自動） */
  .sd-rail-brand img.sd-rail-brand-tx{ display:block; height:1.375rem; width:auto; border-radius:0; }   /* .sd-rail-brand img より詳細度を上げる */
  .sd-nav{ display:block; margin:0; padding:6px 0 0; }
  .sd-nav a{ display:flex; flex-direction:row; justify-content:flex-start; gap:12px; margin:0; padding:0 var(--gutter); min-height:3.25rem; border-radius:0; border-bottom:1px solid var(--line-w); font-size:1rem; color:var(--ink); background:none; opacity:1; }
  .sd-nav a .sd-ico{ color:var(--ink-2); }
  .sd-nav a:hover{ background:var(--paper-2); color:var(--ink); }
  /* 管理の項目の前は余白＋薄い罫で区切る（太い縁は使わない・2026-09-26 hook 指摘） */
  .sd-nav-gap{ display:none; }
  .sd-nav a.sd-nav-sys{ margin-top:8px; position:relative; }
  .sd-nav a.sd-nav-sys::before{ content:""; position:absolute; left:var(--gutter); right:var(--gutter); top:-4px; height:1px; background:var(--line); }
  .sd-nav a.is-active{ background:var(--accent-tint); color:var(--ink); }
  .sd-userbox-sp{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 12px; padding:12px var(--gutter) 14px; font-size:.9rem; }
  .sd-userbox-sp .sd-theme{ color:var(--ink); border-color:var(--line); }
  .sd-userbox-sp .sd-font{ border-color:var(--line); }
  .sd-userbox-sp .sd-font button, .sd-userbox-sp .sd-font-cap{ color:var(--ink); border-color:var(--line); }
  .sd-userbox-sp .sd-theme:hover{ background:var(--paper-2); }
  .sd-userbox-sp .sd-uname{ color:var(--ink); }
  .sd-userbox-sp .sd-logout{ color:var(--ink); border-color:var(--accent-line); height:2.75rem; padding:0 1rem; background:var(--paper); }

  /* 下タブ（主要 4 項目＋メニュー）。白地・上に薄い罫。今のページはブルー */
  .sd-tabbar{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:fixed; left:0; right:0; bottom:0; z-index:39; background:var(--paper); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -4px 16px rgba(60,55,40,.06); }
  .sd-tabbar a, .sd-tabbar button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:3.625rem; padding:6px 2px; border:0; background:none; color:var(--muted); font:inherit; font-size:.68rem; font-weight:700; text-decoration:none; cursor:pointer; }
  .sd-tabbar a.is-active{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink); }
  .sd-tabbar .sd-ico{ width:22px; height:22px; }
}

@media (max-width:640px){
  .sd-title{ font-size:1.4rem; margin:0 0 14px; }
  h2{ font-size:1rem; }

  /* タブは横スクロールにせず、3 列のキーで全部見せる（「類似」が画面外に隠れていた） */
  .sd-tabs{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; border-bottom:0; margin:0 0 12px; }
  .sd-tab-btn{ margin:0; padding:0 6px; min-height:2.75rem; justify-content:center; border:1px solid var(--accent-line); border-radius:var(--r); background:var(--paper); color:var(--ink); font-size:.86rem; white-space:normal; line-height:1.2; text-align:center; }
  .sd-tab-btn.is-on{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); box-shadow:none; }

  .sd-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sd-stat{ padding:14px 14px 12px; border-bottom:1px solid var(--line); }
  .sd-stat:nth-child(2n){ border-right:0; }
  .sd-stat:nth-last-child(-n+2){ border-bottom:0; }
  .sd-stat-n{ font-size:2rem; }

  .tblwrap:has(> .tbl-cards){ overflow:visible; background:transparent; border:0; box-shadow:none; }
  .tbl-cards, .tbl-cards thead, .tbl-cards tbody, .tbl-cards tr, .tbl-cards td{ display:block; }
  .tbl-cards thead{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .tbl-cards tbody tr{ border:1px solid var(--tbl-head); background:var(--paper); margin:0 0 10px; padding:12px 14px; border-radius:var(--r-lg); box-shadow:var(--shadow-1); }
  .tbl-cards tbody tr:nth-child(even), .tbl-cards tbody tr:hover{ background:var(--paper); }   /* カード化ではゼブラを使わない */
  .tbl-cards td{ display:block; width:auto; border:0; white-space:normal; padding:3px 0 3px 5.6em; text-indent:-5.6em; font-size:.94rem; line-height:1.55; }
  .tbl-cards td::before{ content:attr(data-label); display:inline-block; width:6.2em; margin-right:.8em; text-indent:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; color:var(--muted); font-size:.76rem; font-weight:700; }
  .tbl-cards td *{ text-indent:0; }
  .tbl-cards td:empty{ display:none; }
  .tbl-cards tbody tr:last-child td:not(:first-child){ border-bottom:0; }
  .sd-card .tblwrap > .tbl-cards tbody tr:last-child td:not(:first-child){ border-bottom:0; }   /* 表の下端の線（.tbl tbody tr:last-child td）をカードの中に出さない */
  .tbl-cards td form{ display:inline-block; vertical-align:middle; margin:0; }
  .tbl-cards tbody td:first-child:not([colspan]){ display:block; margin:0 0 9px; padding:0 0 8px; text-indent:0; border-bottom:1px solid var(--tbl-row); font-size:1.02rem; font-weight:700; color:var(--ink); line-height:1.45; overflow-wrap:anywhere; }
  .tbl-cards tbody td:first-child:not([colspan])::before{ display:none; }
  .tbl-cards td.act{ display:flex; flex-wrap:wrap; gap:8px; width:auto; white-space:normal; text-indent:0; margin:11px 0 0; padding:11px 0 0; border-top:1px solid var(--tbl-row); }
  .tbl-cards td.act::before{ display:none; }
  .tbl-cards td.act .sd-btn{ flex:1 1 40%; min-height:2.75rem; font-size:.9rem; }
  .tbl-cards tbody td[colspan]{ display:block; padding:2px 0; text-indent:0; }
  .tbl-cards tbody td[colspan]::before{ display:none; }
  .tbl-cards tbody td.sd-log-time:first-child{ font-size:.82rem; font-weight:700; color:var(--muted); margin-bottom:7px; padding-bottom:7px; }
  .tbl-cards td.sd-log-ip{ display:none; }
  .tbl-cards td.sd-dw-lthumb{ padding:0; margin:0 0 8px; width:auto; border-bottom:0; }
  .tbl-cards td.sd-dw-lthumb img{ width:100%; height:auto; max-height:160px; object-fit:contain; }

  .sd-card{ padding:16px 16px 18px; }
  .sd-card > h2:first-child, .sd-card > .sd-od-h2row:first-child, .sd-card > .sd-card-h:first-child{ margin:-16px -16px .875rem !important; padding:.625rem 16px; }
  .sd-card-wide, .sd-card-full{ max-width:none; }
  .sd-fold > summary{ min-height:2.75rem; }
  .sd-paging{ gap:8px 14px; font-size:.86rem; }
  .sd-filter{ gap:6px; }
  .sd-filter-btn{ min-height:2.5rem; }
  .note{ font-size:.9rem; }
  .sd-actions .sd-btn{ flex:1 1 44%; }
  .sd-sp-only{ display:block; }
  .sd-mini{ flex-basis:148px; width:148px; }
}

/* 印刷（トラベラー・台帳は mPDF なのでここは通らない。画面の印刷だけ） */
@media print{
  body{ background:#fff; color:#111; }
  .sd-head, .sd-nav-panel, .sd-tabbar, .sd-actions, .sd-btn, .sd-paging-per{ display:none !important; }
  .sd-main{ max-width:none; margin:0; padding:0; }
  a{ color:inherit; text-decoration:none; }
}
