/* HAJIME — 現場の黒板の世界（スライス7で全面統一）。
   基調：黒板グリーン地／黒いプレート／白いチョークの文字と線／グレーの幾何学ライン。
   色は状態表示のみ。チョークの質感は飾りに留め、本文は明瞭な白系で保つ。
   屋外モードは従来どおり白地×純黒の最大コントラスト（変数を丸ごと差し替える）。 */
:root{
  --ink:#f4f7f2; --ink2:#c6d2c6; --ink3:#9db1a0;
  --line:rgba(244,247,242,.30); --line2:rgba(244,247,242,.15);
  --bg:#0c3524; --bg2:#092a1c; --card:#101613; --chip:#1d4433;
  --barbg:rgba(8,30,20,.94);
  --btnbg:#f4f7f2; --btnink:#0c3524;
  --grey:#9a9d98;
  --ok:#63d68f; --ng:#ff8f98; --warn:#ffcf6e; --ngline:rgba(255,143,152,.55);
  --radius:14px;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0; height:100%}
/* アプリらしく止める（スライス9）：画面全体の引っ張り・バウンスとスクロールの伝播を止める。
   中身（.viewbody）のスクロール自体は妨げない。長押しの選択・コールアウトも止めるが、
   入力欄の中では文字の選択・編集を妨げない。ダブルタップズームは viewport 側（最大寸法固定）と
   touch-action:manipulation で止める。地図のピンチは地図領域だけ touch-action:none で自前に処理する。 */
html{overscroll-behavior:none}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  color:var(--ink); background:var(--bg);
  font-size:17.5px; line-height:1.65;
  overscroll-behavior:none;
  touch-action:manipulation;
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input,select,textarea{font:inherit; color:inherit; -webkit-user-select:text; user-select:text; -webkit-touch-callout:default}
input::placeholder,textarea::placeholder{color:var(--ink3); opacity:1}
img{display:block; max-width:100%; -webkit-user-drag:none}

/* ---------- アプリの殻（スライス7）：ヘッダーとタブは固定、スクロールするのは中身だけ ---------- */
#app{height:100vh; height:100dvh; display:flex; flex-direction:column}
.screen{flex:1; display:flex; flex-direction:column; min-height:0; width:100%; max-width:640px; margin:0 auto}
.page{flex:1; display:flex; flex-direction:column; min-height:0}
.page.enter-fwd{animation:enterFwd .38s var(--ease) both}
.page.enter-back{animation:enterBack .38s var(--ease) both}
.page.enter-fade{animation:enterFade .3s var(--ease) both}
.page.settled{animation:none}
@keyframes enterFwd{from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none}}
@keyframes enterBack{from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none}}
@keyframes enterFade{from{opacity:0} to{opacity:1}}
.viewbody{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:0 16px 28px}
/* リスト・カードがスッと順に現れる（staggerIn が delay を付ける）。動きは小さく、静かに */
@keyframes riseIn{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
.rise{animation:riseIn .5s var(--ease) both}
/* 動きを減らす設定の端末では、アニメーションをほぼ止める */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important}
}
.topbar{
  flex:none; z-index:20; background:var(--barbg); backdrop-filter:blur(10px);
  padding:10px 16px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--line);
}
.topbar .back{font-size:22px; line-height:1; padding:8px 10px; color:var(--ink2)}
.topbar h1{font-size:17.5px; font-weight:700; margin:0; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar .spacer{flex:1}
.brand{padding:20px 2px 8px; display:flex; align-items:center; gap:12px; position:relative}
.brand .emblem{width:46px; height:46px; border-radius:12px; border:1px solid var(--line); flex:none}
.brand .logo{font-size:21px; font-weight:800; letter-spacing:.14em; line-height:1.25}
.brand .tag{font-size:12.5px; color:var(--ink2); letter-spacing:.08em; margin-top:2px}
.brand .motif{position:absolute; right:-10px; top:2px; width:88px; height:88px; color:var(--grey); opacity:.15; pointer-events:none}
.brand>*:not(.motif){position:relative; z-index:1}
.brand .spacer{flex:1}

/* 屋外モードのコンパクトな切替（ヘッダー内・スライス7で主張を弱めた） */
.ochip{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  min-height:40px; padding:7px 13px; border-radius:999px;
  border:1.5px solid var(--line); background:transparent;
  color:var(--ink2); font-size:13.5px; font-weight:700; letter-spacing:.03em;
  transition:all .25s var(--ease);
}
.ochip svg{width:17px; height:17px; flex:none}
.ochip:active{transform:scale(.96)}
.ochip.on{background:var(--btnbg); border-color:var(--btnbg); color:var(--btnink)}

/* ---------- typography helpers ---------- */
.bignum{font-size:52px; font-weight:800; letter-spacing:-.01em; line-height:1.05}
.bignum small{font-size:15px; font-weight:600; color:var(--ink2); margin-left:4px}
.label{font-size:12.5px; color:var(--ink2); letter-spacing:.06em; font-weight:600}
.h2{font-size:15px; font-weight:700; letter-spacing:.05em; margin:28px 0 10px}
.sec-title{font-size:13px; font-weight:700; color:var(--ink2); letter-spacing:.06em; margin:24px 2px 8px}
.muted{color:var(--ink2)} .small{font-size:14px} .tiny{font-size:12.5px; color:var(--ink2); line-height:1.6}

/* ---------- cards & rows ---------- */
.card{border:1px solid var(--line); border-radius:var(--radius); padding:14px; background:var(--card)}
.card + .card{margin-top:10px}
a.card{display:block; transition:transform .3s var(--ease), border-color .3s}
a.card:active{transform:scale(.99)}
.row{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:18px 2px; border-bottom:1px solid var(--line2);
  transition:background .25s var(--ease);
}
a.row:active,button.row:active{background:var(--bg2)}
.row .grow{flex:1; min-width:0}
.row .chev{color:var(--ink3); font-size:18px; flex:none}
.row .r-title{font-weight:600; font-size:17.5px; line-height:1.45}
.row .r-sub{font-size:13.5px; color:var(--ink2); margin-top:2px; line-height:1.5}
.row .r-num{font-size:22px; font-weight:700; flex:none}
.list{border-top:1px solid var(--line2)}
/* グループ化した行リスト（REPAIRMANのマイページと同じ文法：カードの中に行が並ぶ） */
.glist{border:1px solid var(--line); border-radius:var(--radius); background:var(--card); overflow:hidden}
.glist .row{padding:16px 14px; border-bottom:1px solid var(--line2)}
.glist .row:last-child{border-bottom:none}
.glist a.row:active,.glist button.row:active{background:var(--bg2)}
.srow{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:15px 14px; border-bottom:1px solid var(--line2);
  transition:background .25s var(--ease);
}
.srow:last-child{border-bottom:none}
a.srow:active,button.srow:active{background:var(--bg2)}
.srow .ic{width:22px; height:22px; flex:none; color:var(--ink2)}
.srow .ic svg{width:100%; height:100%; display:block}
.srow .grow{flex:1; min-width:0}
.srow .t{font-weight:600; font-size:17px; line-height:1.4}
.srow .sub{display:block; font-size:13.5px; color:var(--ink2); margin-top:1px; line-height:1.5}
.srow .val{font-size:13.5px; color:var(--ink2); flex:none}
.srow .chev{color:var(--ink3); flex:none; font-size:18px}
/* プロフィールの頭（REPAIRMAN式：アバター＋名前＋連絡先） */
.prof-head{display:flex; align-items:center; gap:14px}
.avatar{
  width:56px; height:56px; border-radius:50%; flex:none;
  background:var(--chip); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:23px; font-weight:800; color:var(--ink);
}
.prof-head .pname{font-size:19px; font-weight:800; line-height:1.35}
.prof-head .pmeta{font-size:13.5px; color:var(--ink2); margin-top:1px; line-height:1.5}
/* 書類の情報カード（ラベル＋値の行で組む：文章の壁にしない） */
.mkv{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line2); align-items:baseline}
.mkv:last-child{border-bottom:none; padding-bottom:2px}
.mkv:first-child{padding-top:2px}
.mkv .k{flex:none; width:78px; font-size:13px; font-weight:700; color:var(--ink2); letter-spacing:.04em}
.mkv .v{flex:1; min-width:0; font-size:16.5px; line-height:1.55}
.pillrow{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.wchip{
  display:inline-flex; align-items:center; font-size:13.5px; font-weight:600;
  padding:6px 12px; border-radius:999px; background:var(--chip); color:var(--ink);
}

/* ---------- buttons & chips ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--btnbg); color:var(--btnink); border-radius:999px; padding:16px 24px; min-height:56px;
  font-weight:600; font-size:16.5px; transition:transform .25s var(--ease), opacity .25s;
}
.btn:active{transform:scale(.97)}
.btn.block{display:flex; width:100%}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.sub{background:var(--chip); color:var(--ink)}
.btn.danger{background:transparent; color:var(--ng); border:1px solid var(--ngline)}
.btn[disabled]{opacity:.35; pointer-events:none}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 4px}
.chip{
  display:inline-flex; align-items:center; min-height:44px;
  padding:10px 16px; border-radius:999px; background:var(--chip); font-size:14.5px; color:var(--ink2);
  transition:all .25s var(--ease); white-space:nowrap;
}
.chip.on{background:var(--btnbg); color:var(--btnink)}
/* 写真の区分チップは、スクロールしてもヘッダーの下に残る（アプリの作法） */
.stickychips{position:sticky; top:0; z-index:6; background:var(--bg); margin:0; padding:10px 0 8px}

/* ---------- forms ---------- */
.field{margin-top:16px}
.field label{display:block; font-size:13.5px; font-weight:600; color:var(--ink2); letter-spacing:.05em; margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:15px 14px; min-height:54px; background:var(--card);
  outline:none; transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field textarea{min-height:64px; resize:vertical}
/* フォームの入力欄は1列・全幅が原則（スライス9）：この幅では2列にせず縦に積む。
   日付入力などは実機で固有の最小幅が大きく、2列だと重なり・はみ出しの原因になる。
   .grid2 は旧クラスの名残対策として、残っていても1列に倒れる安全な定義にしておく。 */
.grid2{display:block}
.grid2 .field{margin-top:14px}
.field input,.field select,.field textarea{min-width:0}
/* フォーム部品の幅の discipline（2026-10-31 龍大の実機指摘：検査書類を作る画面で
   日付入力だけがカードの右端からはみ出した）。iOS の日付・時刻入力は、ネイティブ外観の
   ままだと固有の最小幅が残り、width:100% を指定してもカードを突き破る。外観を外して
   テキスト入力と同じ幅に統一する（タップすれば日付ピッカーは従来どおり開く）。
   あわせて全ての入力部品に max-width:100% の保険をかける。 */
input,select,textarea{max-width:100%}
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"]{
  -webkit-appearance:none; appearance:none; display:block; width:100%; max-width:100%; min-width:0; text-align:left;
}
.card .field:first-child{margin-top:0}

/* ---------- photos ---------- */
.pgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:10px}
.pcell{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); text-align:left; padding:0; transition:transform .3s var(--ease); color:var(--ink); min-width:0}
.pcell:active{transform:scale(.98)}
.pcell .thumb{aspect-ratio:4/3; background:var(--bg2); overflow:hidden}
.pcell .thumb img{width:100%; height:100%; object-fit:cover}
.pcell .meta{padding:9px 11px}
.pcell .meta .t{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcell .meta .s{font-size:12.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* 実物の工事用黒板は反射を抑えたグリーン面が標準（測量用品の実務）。画面の黒板も緑基調に合わせる */
.blackboard{
  background:#0a2b1e; color:#f5f8f5; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-top:12px;
  font-size:15px; line-height:1.8;
}
.blackboard .bb-title{font-size:12px; letter-spacing:.18em; color:#bcd6c8; margin-bottom:4px}
.blackboard table{border-collapse:collapse; width:100%}
.blackboard td{padding:1px 0; vertical-align:top}
.blackboard td.k{color:#bcd6c8; width:78px; font-size:12.5px; padding-top:4px}

/* ---------- measurement / judge ---------- */
.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px}
.stat{border:1px solid var(--line2); border-radius:10px; padding:8px 6px; text-align:center; background:var(--bg2)}
.stat .v{font-size:20px; font-weight:700}
.stat .k{font-size:11.5px; color:var(--ink2)}
.badge{display:inline-block; font-size:12.5px; font-weight:700; padding:4px 11px; border-radius:999px; letter-spacing:.03em; white-space:nowrap; flex:none}
.badge.ok{background:rgba(46,160,90,.22); color:#6fe3a1}
.badge.ng{background:rgba(198,47,59,.25); color:#ff9aa4}
.badge.warn{background:rgba(185,125,16,.30); color:#ffd479}
.badge.flat{background:var(--chip); color:var(--ink2)}
table.mtable{width:100%; border-collapse:collapse; margin-top:10px; font-size:15.5px}
table.mtable th{font-size:12.5px; color:var(--ink2); font-weight:600; text-align:left; padding:7px 6px; border-bottom:1px solid var(--line)}
table.mtable td{padding:8px 6px; border-bottom:1px solid var(--line2); vertical-align:middle}
table.mtable input{width:88px; max-width:24vw; border:1px solid var(--line); border-radius:8px; padding:10px 9px; min-height:44px; background:var(--card); color:var(--ink)}
table.mtable input.lbl{width:100%; min-width:60px}
.dev-pos{color:var(--ink)} .st-ok{color:var(--ok); font-weight:700} .st-ng{color:var(--ng); font-weight:700}
/* 管理図は「黒板に貼った紙」として、白い紙面のまま読む（図の色は従来どおり） */
.chart{margin-top:14px; border:1px solid var(--line); border-radius:12px; padding:10px; background:#f6f6f1}

/* ---------- bottom nav（殻の子として常に画面下。fixedには頼らない） ---------- */
.tabbar{
  flex:none; z-index:30;
  background:var(--barbg); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  display:flex; padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 0 8px; font-size:12.5px; color:var(--ink2); letter-spacing:.04em;
}
.tabbar a svg{width:23px; height:23px; display:block}
.tabbar a.on{color:var(--ink); font-weight:700}
.tabbar a:active{opacity:.65}

/* ---------- misc ---------- */
.empty{padding:38px 10px; text-align:center; color:var(--ink2); font-size:15.5px; line-height:1.7}
/* 右下のボタンは「＋」だけの記号にせず、カメラの絵と言葉で何のボタンか分かる形に（スライス9） */
.fab{
  position:fixed; right:16px; bottom:calc(88px + env(safe-area-inset-bottom)); z-index:25; height:56px; padding:0 20px; border-radius:999px;
  background:var(--btnbg); color:var(--btnink); font-size:16.5px; font-weight:700;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.35); transition:transform .3s var(--ease);
}
.fab svg{width:23px; height:23px; flex:none}
.fab:active{transform:scale(.96)}
#toast{
  position:fixed; left:50%; bottom:calc(104px + env(safe-area-inset-bottom)); transform:translate(-50%,12px); z-index:50;
  background:var(--btnbg); color:var(--btnink); font-size:14.5px; font-weight:600; padding:12px 18px; border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  opacity:0; pointer-events:none; transition:all .35s var(--ease); max-width:88vw; text-align:center;
}
#toast.show{opacity:1; transform:translate(-50%,0)}
.hero{padding:18px 2px 2px}
.hero .rowline{display:flex; align-items:flex-end; justify-content:space-between; gap:10px}
details.more{margin-top:18px}
details.more summary{font-size:13.5px; color:var(--ink2); cursor:pointer; padding:6px 0}
.kv{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line2); font-size:15.5px}
.kv .k{color:var(--ink2); font-size:13px; white-space:nowrap}
.kv .v{text-align:right; min-width:0}
input[type="file"].hidden{display:none}

/* ---------- flow steps & checklist (v2) ---------- */
.steps{display:flex; gap:6px; margin-top:14px}
.step{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; position:relative}
/* 段階同士を細い線でつなぎ、今どこまで進んだかを見せる */
.step:not(:last-child)::after{
  content:''; position:absolute; top:15px; left:calc(50% + 19px); right:calc(-50% + 19px);
  height:2px; background:var(--line2); border-radius:1px;
}
.step.done:not(:last-child)::after{background:var(--ink)}
.step .dot{
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--ink2); background:var(--card);
  position:relative; z-index:1;
}
.step .s-label{font-size:12px; color:var(--ink2); line-height:1.35}
.step.now .dot{border-color:var(--ink); color:var(--ink)}
.step.now .s-label{color:var(--ink); font-weight:700}
.step.done .dot{background:var(--btnbg); border-color:transparent; color:var(--btnink)}
.step.done .s-label{color:var(--ink2)}
.ckbox{
  width:34px; height:34px; flex:none; border-radius:9px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; color:var(--btnink);
  transition:all .2s var(--ease);
}
.ckbox.on{background:var(--btnbg); border-color:transparent}
.ckrow{align-items:flex-start}

/* ---------- スライス20：見えない操作・状態の見える化 ---------- */
/* 自動保存の状態表示：入力した画面の上に固定して、「保存中…／保存しました ✓ 時刻」を常に見せる */
.savestate{
  position:sticky; top:0; z-index:6;
  display:flex; align-items:center; gap:9px;
  margin-top:10px; padding:9px 13px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--barbg); backdrop-filter:blur(10px);
  font-size:13.5px; font-weight:700; color:var(--ink2); letter-spacing:.02em;
}
.savestate .ss-dot{width:10px; height:10px; border-radius:50%; background:var(--ink3); flex:none}
.savestate.saving{color:var(--ink)}
.savestate.saving .ss-dot{background:var(--warn); animation:ssPulse 1s ease-in-out infinite}
.savestate.saved{color:var(--ink)}
.savestate.saved .ss-dot{background:var(--ok)}
@keyframes ssPulse{0%,100%{opacity:1} 50%{opacity:.35}}
/* 並び替えモードの行：つかみ手と上下ボタンは大きく、迷わない大きさで出す */
.ckhandle{flex:none; font-size:19px; color:var(--ink3); padding:8px 2px; line-height:1}
.mvbtns{flex:none; display:flex; flex-direction:column; gap:6px}
.mvbtn{
  width:46px; height:40px; border:1.5px solid var(--line); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; color:var(--ink); background:var(--card);
}
.mvbtn:active{background:var(--bg2)}
.mvbtn.off{opacity:.28; pointer-events:none}
.ckedit{flex:none; display:flex; flex-direction:column; gap:6px; align-items:stretch}
/* 書類ホーム：進み具合のコンパクト表示と、機能リストの行を少し詰める */
.steps.compact{gap:4px; margin-top:8px}
.steps.compact .step:not(:last-child)::after{top:11px; left:calc(50% + 15px); right:calc(-50% + 15px)}
.steps.compact .dot{width:24px; height:24px; font-size:11.5px}
.steps.compact .s-label{font-size:11px}
.glist.tight .row{padding:10px 14px}
.glist.tight .r-sub{line-height:1.4}

/* ---------- 工期の進み具合・作業フロー写真（スライス5） ---------- */
.pbar{height:6px; border-radius:3px; background:var(--line2); margin-top:7px; overflow:hidden}
.pbar span{display:block; height:100%; background:var(--ink); border-radius:3px; transition:width .6s var(--ease)}
.frow{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line2)}
.frow:last-child{border-bottom:none; padding-bottom:2px}
.fnum{
  width:30px; height:30px; flex:none; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--ink2); background:var(--card);
}
.fnum.done{background:var(--btnbg); border-color:transparent; color:var(--btnink)}
.flabel{flex:1; min-width:0; font-weight:600; font-size:16px; line-height:1.45}
.fcount{font-size:13px; color:var(--ink2); font-weight:600; margin-left:8px; white-space:nowrap}
.fshot{min-height:48px; padding:10px 18px; flex:none}

/* ---------- print (写真帳 / 出来形管理図表) ---------- */
#print-area{display:none}
@media print{
  /* 印刷は白い紙の文書。アプリの黒板グリーン（body の背景・文字色はテーマ変数で暗色）を
     印刷に一切持ち込まない（2026-10-31 父の実機不具合：緑の紙・読めない表 の根治）。
     html/body ごと白地×黒文字に固定し、#print-area 内でもテーマ色の継承を断つ。
     図表 SVG の色は fill/stroke 属性で指定されるため、この強制の影響を受けない。 */
  html,body{background:#fff !important}
  body{padding:0; color:#000}
  #app,#toast{display:none !important}
  #print-area{display:block; background:#fff; color:#000; font-size:12px}
  #print-area *{background-color:transparent}
  #print-area th{background-color:#eee}
  #print-area h2,#print-area h3{color:#000}
  .pdoc{page-break-after:always; padding:6mm 2mm}
  .pdoc:last-child{page-break-after:auto}
  .pdoc h1{font-size:17px; margin:0 0 2mm}
  .pdoc h2{font-size:13px; margin:5mm 0 2mm; border-bottom:1.5px solid #000; padding-bottom:1mm}
  .pdoc .sub{font-size:11px; color:#333; margin-bottom:3mm}
  .pdoc table{width:100%; border-collapse:collapse; font-size:11px}
  .pdoc th,.pdoc td{border:1px solid #888; padding:1.4mm 2mm; text-align:left; vertical-align:top}
  .pdoc th{background:#eee; font-weight:600; white-space:nowrap}
  .p-photo{margin:0 0 5mm; page-break-inside:avoid}
  .p-photo img{width:100%; max-height:92mm; object-fit:contain; border:1px solid #bbb}
  .p-photo figcaption{font-size:11px; margin-top:1.5mm}
  .p-cols{display:grid; grid-template-columns:1fr 1fr; gap:5mm}
  .p-note{font-size:10px; color:#444; margin-top:3mm}
}

/* ---------- photo editor (slice 2) ---------- */
.hidden{display:none !important}
.ed-wrap{position:relative; margin-top:12px; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--bg2)}
.ed-wrap canvas{width:100%; height:auto; display:block}
#ed-over{position:absolute; inset:0}
.ed-tools{margin-top:16px; display:flex; flex-direction:column; gap:14px}
.ed-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ed-label{width:64px; flex:none; font-size:13.5px; font-weight:700; color:var(--ink2)}
.ed-btn{padding:12px 18px; min-height:48px}
.btn.on-dark{background:var(--btnbg); color:var(--btnink)}
.ed-row input[type="range"]{flex:1; min-width:140px; height:44px; accent-color:var(--ink)}
.ed-dot{width:36px; height:36px; border-radius:50%; border:2px solid transparent; padding:0}
.ed-dot.on{border-color:var(--ink)}

/* ---------- 現場の実条件：天気・風速・現在地タイル／屋外モード（スライス3） ---------- */
.btn.big{min-height:68px; font-size:17.5px}
/* 屋外モードの説明つき切替：置き場所はマイページのみ（ヘッダーはコンパクトな .ochip） */
.obtn{
  flex:none; min-height:52px; padding:8px 15px; border-radius:16px;
  border:1.5px solid var(--line); background:var(--card);
  color:var(--ink2); letter-spacing:.03em; text-align:left;
  display:flex; flex-direction:column; justify-content:center; gap:1px; line-height:1.3;
  transition:all .25s var(--ease);
}
.obtn .ob-t{font-size:15px; font-weight:800; white-space:nowrap}
.obtn .ob-s{font-size:11.5px; font-weight:600; white-space:nowrap}
.obtn:active{transform:scale(.97)}
.obtn.on{background:var(--btnbg); border-color:transparent; color:var(--btnink)}
.condstrip{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:14px}
.ctile{
  border:1.5px solid var(--line); border-radius:12px; background:var(--card);
  padding:10px 11px; text-align:left; display:flex; flex-direction:column; gap:1px;
  min-height:96px; width:100%; font:inherit; color:inherit;
}
button.ctile{cursor:pointer}
button.ctile:active{transform:scale(.98)}
.ctile .ct-k{font-size:12.5px; font-weight:700; color:var(--ink2); letter-spacing:.06em}
.ctile .ct-v{font-size:24px; font-weight:800; line-height:1.25; font-variant-numeric:tabular-nums}
.ctile .ct-v .ct-u{font-size:13px; font-weight:600; color:var(--ink2); margin-left:3px}
.ctile .ct-s{font-size:12px; color:var(--ink2); line-height:1.45}

.mapbox{
  position:relative; overflow:hidden; border-radius:8px; height:54px; margin-top:5px;
  background:#dfe5da; border:1px solid var(--line);
}
.mapbox .mapnone{display:flex; align-items:center; justify-content:center; height:100%; font-size:14px; font-weight:700; color:#3f4a3a}
.mapwrap{position:absolute; width:768px; height:768px}
.mapwrap img{position:absolute; width:256px; height:256px; max-width:none}
.pin{
  position:absolute; left:50%; top:50%; width:15px; height:15px; margin:-8px 0 0 -8px;
  border-radius:50%; background:#c62f3b; border:2.5px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.4); z-index:2;
}
.mapattr{
  position:absolute; right:3px; bottom:2px; z-index:2; font-size:9px; color:#333;
  background:rgba(255,255,255,.75); padding:0 3px; border-radius:3px; line-height:1.5;
}
.mapoverlay{
  position:fixed; inset:0; z-index:60; background:var(--bg);
  padding:14px 16px calc(14px + env(safe-area-inset-bottom)); display:flex; flex-direction:column;
}
.mapbig{position:relative; overflow:hidden; border-radius:12px; flex:1; background:#dfe5da; border:1px solid var(--line); margin-top:12px}
/* 対話式マップ（スライス9）：地図の領域内は地図の操作を優先する（touch-action:none でスクロールと競合させない） */
.mapview{position:absolute; inset:0; touch-action:none; overflow:hidden}
.mapwrap-live{width:0; height:0}
.mapctrl{position:absolute; right:10px; bottom:12px; z-index:3; display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.mapbtn{min-width:54px; min-height:54px; padding:0 16px; border-radius:14px; background:rgba(255,255,255,.95); color:#17301f; font-size:25px; font-weight:800; border:1.5px solid rgba(23,48,31,.4); box-shadow:0 2px 8px rgba(0,0,0,.25)}
.mapbtn-home{font-size:15px; min-height:50px}
.mapbtn:active{transform:scale(.95)}

/* 屋外モード：炎天下・雨天でも読める最大コントラスト（白地に黒の太字、色は状態表示のみ） */
body.outdoor{
  --ink:#000; --ink2:#1a1a1a; --ink3:#2e2e2e;
  --line:#8f8f8f; --line2:#a3a3a3; --chip:#e4e4e4; --bg:#fff; --bg2:#efefef; --card:#fff;
  --barbg:rgba(255,255,255,.94);
  --btnbg:#000; --btnink:#fff;
  --ok:#1a7f4b; --ng:#c62f3b; --warn:#b97d10; --ngline:#e3b7bc;
}
body.outdoor .topbar,body.outdoor .tabbar{background:#fff; backdrop-filter:none}
body.outdoor .topbar{border-bottom:2px solid #8f8f8f}
body.outdoor .tabbar{border-top:2px solid #8f8f8f}
body.outdoor .tabbar a{color:#1a1a1a; font-weight:600}
body.outdoor .tabbar a.on{color:#000; font-weight:800}
body.outdoor .card,body.outdoor .glist,body.outdoor .ctile,body.outdoor .pcell,body.outdoor .stat,body.outdoor .chart{border-width:2px; border-color:#8f8f8f}
body.outdoor .row{border-bottom:1.5px solid #a3a3a3}
body.outdoor .glist .row{border-bottom:1.5px solid #a3a3a3}
body.outdoor .btn{min-height:64px; font-weight:700; font-size:17.5px}
body.outdoor .btn.ghost{border:2px solid #000}
body.outdoor .btn.sub{background:#e4e4e4}
body.outdoor .chip{min-height:50px; font-weight:700; color:#000; border:1.5px solid #8f8f8f; background:#fff}
body.outdoor .chip.on{background:#000; color:#fff; border-color:#000}
body.outdoor .field input,body.outdoor .field select,body.outdoor .field textarea{border:1.5px solid #8f8f8f; font-weight:600}
body.outdoor table.mtable input{border-color:#8f8f8f}
body.outdoor .r-sub,body.outdoor .small,body.outdoor .tiny,body.outdoor .label,body.outdoor .muted,body.outdoor .ctile .ct-k,body.outdoor .ctile .ct-s{color:#1a1a1a}
body.outdoor .badge{border:1.5px solid currentColor}
body.outdoor .badge.ok{background:#dcf0e3; color:#0e5c31}
body.outdoor .badge.ng{background:#f8e0e1; color:#a11f29}
body.outdoor .badge.warn{background:#f6ead0; color:#8a5f08}
body.outdoor .badge.flat{background:#e4e4e4; color:#1a1a1a}
body.outdoor .ckbox{border-color:#8f8f8f; border-width:2px}
body.outdoor .ckbox.on{background:#000; border-color:#000; color:#fff}
body.outdoor .fnum{border-color:#8f8f8f; border-width:2px}
body.outdoor .fnum.done{background:#000; border-color:#000; color:#fff}
body.outdoor .pbar{background:#e4e4e4}
body.outdoor .pbar span{background:#000}
body.outdoor .fab{height:64px; font-size:18px; padding:0 24px}
body.outdoor .obtn{border-color:#8f8f8f; color:#000; background:#fff}
body.outdoor .obtn.on{background:#000; border-color:#000; color:#fff}
body.outdoor .ochip{border-color:#8f8f8f; color:#000}
body.outdoor .ochip.on{background:#000; border-color:#000; color:#fff}
body.outdoor .ctile .ct-v{font-size:27px}
body.outdoor .step .dot{border-color:#8f8f8f; background:#fff}
body.outdoor .step.now .dot{border-color:#000}
body.outdoor .step.done .dot{background:#000; border-color:#000; color:#fff}
body.outdoor .blackboard{border-width:2px}
body.outdoor .srow .ic,body.outdoor .srow .val,body.outdoor .mkv .k{color:#1a1a1a}
body.outdoor .brand .motif{opacity:.08}

/* ---------- 初回フロー（スライス4） ---------- */
.fpanel{padding:32px 2px 4px; animation:fadeUp .45s var(--ease)}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.fic{width:76px; height:76px; color:var(--ink)}
.fic svg{width:100%; height:100%; display:block}
/* ウェルカム：HKの紋と HAJIME の印で始まる（会社の馬ロゴ＝絵は出さない。2026-10-31 龍大の訂正）。
   「AZRION」の文字だけを、印の下に小さく添える（署名級） */
.fwel-credit{text-align:center; margin-top:16px; font-size:11px; font-weight:600; letter-spacing:.5em; text-indent:.5em; color:var(--ink3)}
.ftitle{font-size:24px; font-weight:800; line-height:1.42; margin:18px 0 10px; letter-spacing:.01em}
.fbody{font-size:17.5px; line-height:1.75; color:var(--ink); margin:10px 0 0}
.fdots{display:flex; gap:8px; justify-content:center; margin:28px 0 8px}
.fdot{width:9px; height:9px; border-radius:50%; background:var(--line); transition:all .3s var(--ease)}
.fdot.on{background:var(--ink); transform:scale(1.3)}
.flink{
  display:block; margin:12px auto 0; padding:12px 18px; min-height:48px;
  font-size:15px; color:var(--ink2); text-decoration:underline; text-underline-offset:3px;
}
.fsteps{margin:14px 0 0; padding-left:1.4em; font-size:17px; line-height:1.8}
.fmsg{margin-top:14px; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--bg2); font-size:15.5px; line-height:1.65}
/* 「追加が済んだらSafariは閉じてよい」の案内（スライス9）：チョークの枠で目立たせる */
.fclose{margin-top:16px; padding:14px; border:2px dashed var(--ink); border-radius:12px; background:rgba(255,255,255,.05)}
.fclose-t{font-weight:800; font-size:17px}
.fclose-b{margin-top:5px; font-size:15.5px; line-height:1.7; color:var(--ink2)}
body.outdoor .fclose{border-color:#000; background:#fff}
body.outdoor .fclose-b{color:#000}
/* ---------- インストール案内：絵で見せる3ステップ（スライス10） ----------
   お父さんの実機（下に浮くピル型バーのSafari）の線画で、押す場所を丸で囲んで示す。
   文章は各ステップ1行だけ。色は変数経由なので屋外モード（白地×純黒）にもそのまま追従する。
   中身が長いので、ブランド行を残してパネル側だけをスクロールさせる。 */
.fscroll{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.fscroll.has-point{padding-bottom:150px}
.gsteps{margin-top:22px; display:flex; flex-direction:column; gap:28px}
.gstep-head{display:flex; align-items:center; gap:12px}
.gnum{
  flex:none; width:38px; height:38px; border-radius:50%;
  border:2.5px solid var(--ink); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; line-height:1;
}
.gcap{font-size:19px; font-weight:700; line-height:1.5; margin:0}
.gart{
  margin-top:10px; background:var(--card);
  border:1.5px solid var(--line); border-radius:16px;
  padding:12px 8px 8px; display:flex; justify-content:center;
}
.gart svg{width:100%; max-width:320px; height:auto; display:block; color:var(--ink)}
.gnote{margin-top:20px; font-size:15.5px; line-height:1.65; color:var(--ink2)}
body.outdoor .gart{border-width:2px; border-color:#8f8f8f}
body.outdoor .gnum{border-color:#000; color:#000}
/* 実物の「…」の場所（右下／iPadは右上）を指す控えめな印。動きは静かな鼓動だけ（長いイージング）。
   タップは一切受けない（pointer-events:none）。減らす設定の端末では全体ルールで止まる。 */
.gpoint{
  position:fixed; right:32px; bottom:calc(env(safe-area-inset-bottom) + 88px); z-index:30;
  pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--ink);
}
.gpoint-ring{
  width:46px; height:46px; border-radius:50%;
  border:2.5px solid var(--ink); background:rgba(8,30,20,.45);
  display:flex; align-items:center; justify-content:center; gap:4px;
  animation:gpointPulse 2.8s var(--ease) infinite alternate;
}
.gpoint-ring i{width:5px; height:5px; border-radius:50%; background:currentColor; display:block}
.gpoint svg{width:22px; height:22px; display:block; animation:gpointPulse 2.8s var(--ease) infinite alternate}
@keyframes gpointPulse{from{transform:scale(1); opacity:.72} to{transform:scale(1.07); opacity:1}}
.gpoint.top{bottom:auto; top:calc(env(safe-area-inset-top) + 58px); flex-direction:column-reverse}
.gpoint.top svg{transform:rotate(180deg); animation:gpointPulseTop 2.8s var(--ease) infinite alternate}
@keyframes gpointPulseTop{from{transform:rotate(180deg) scale(1); opacity:.72} to{transform:rotate(180deg) scale(1.07); opacity:1}}
body.outdoor .gpoint-ring{background:rgba(255,255,255,.6); border-color:#000}
body.outdoor .gpoint{color:#000}
/* ---------- バーの位置の選択（スライス11） ----------
   上バー／下バーで押す場所が違うため、まず自分の画面と同じ絵を選んでもらう。
   選択肢は大きなボタン（96px以上）に絵＋言葉。選んだ印は、その画面で押す実物の場所だけを指す：
   下バー＝右下の「…」／上バー＝右上の「共有」マーク（下は指さない）。 */
/* 印の輪の中の共有マークは、輪ごと鼓動するので個別には動かさない（上のバーでも反転させない） */
.gpoint-ring svg{width:22px; height:22px; display:block; animation:none}
.gpoint.top .gpoint-ring svg{transform:none}
.gchoose{margin-top:22px; display:flex; flex-direction:column; gap:14px}
.gchoose-q{font-size:20px; font-weight:800; line-height:1.5; margin:0}
.gchoose-sub{font-size:16px; line-height:1.65; color:var(--ink2); margin:-4px 0 2px}
.gchoice{
  display:flex; align-items:center; gap:16px; width:100%; min-height:96px;
  padding:14px 16px; background:var(--card); border:2px solid var(--line); border-radius:16px;
  color:var(--ink); text-align:left; cursor:pointer; font:inherit;
}
.gchoice .gc-art{flex:none; display:block}
.gchoice .gc-art svg{width:52px; height:72px; display:block; color:var(--ink)}
.gchoice .gc-txt{display:flex; flex-direction:column}
.gchoice .gc-t{font-size:21px; font-weight:800; line-height:1.4}
.gchoice .gc-s{font-size:15px; line-height:1.55; color:var(--ink2); margin-top:3px}
.gchoice.on{border-color:var(--ink); background:rgba(255,255,255,.08)}
body.outdoor .gchoice{border-color:#8f8f8f; background:#fff; color:#000}
body.outdoor .gchoice .gc-t, body.outdoor .gchoice .gc-art svg{color:#000}
body.outdoor .gchoice .gc-s, body.outdoor .gchoose-sub{color:#000}
body.outdoor .gchoice.on{border-color:#000; background:#fff}
.gswitch{margin-top:26px; border-top:1.5px dashed var(--line); padding-top:18px}
.gswitch p{font-size:15.5px; line-height:1.65; color:var(--ink2); margin:0 0 12px}
.gswitch .btn{width:100%}
body.outdoor .gswitch{border-color:#8f8f8f}
body.outdoor .gswitch p{color:#000}
.ferr{margin-top:14px; padding:12px 14px; border:1.5px solid var(--ngline); border-radius:12px; background:rgba(198,47,59,.14); color:#ffb9bf; font-size:15.5px; line-height:1.65; font-weight:600}
body.outdoor .flink{color:#000}
body.outdoor .fmsg,body.outdoor .ferr{border-width:2px; border-color:#8f8f8f}
body.outdoor .ferr{color:#000; background:#fff}

/* ---------- パスワード欄（表示切替・強さゲージ・再確認）スライス6 ---------- */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:62px}
.pw-eye{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:50px; height:50px; display:flex; align-items:center; justify-content:center;
  color:var(--ink2); border-radius:12px;
}
.pw-eye svg{width:25px; height:25px; display:block}
.pw-eye:active{background:var(--bg2); color:var(--ink)}
.pwmeter{margin-top:10px}
.pwbar{display:flex; gap:6px}
.pwbar span{flex:1; height:8px; border-radius:99px; background:var(--line2); transition:background .25s var(--ease)}
.pwbar span.on.lv0{background:var(--ng)}
.pwbar span.on.lv1{background:var(--warn)}
.pwbar span.on.lv2{background:var(--ok)}
.pwlab{margin-top:7px; font-size:15px; font-weight:700}
.pwhint{margin-top:2px; font-size:13px; color:var(--ink2); line-height:1.55}
.pwmatch{margin-top:9px; font-size:15px; font-weight:600; line-height:1.55}
.pwmatch.ok{color:var(--ok)}
.pwmatch.bad{color:var(--ng)}
body.outdoor .pw-eye{color:#000}
body.outdoor .pwbar span{border:1px solid #8f8f8f}

/* ---------- スライス8：標準UIパターン＋インフォグラフィックアニメーション ----------
   ハンバーガー（ドロワー）／パンくず／モーダル／アコーディオン／ラジオ／プルダウンの矢印／
   カルーセル／進み具合の円とカウントアップ。動きは長いイージングのみ、バウンス等は使わない。 */
/* ハンバーガーボタン（ヘッダー右端・静かな輪郭ボタン） */
.menubtn{
  flex:none; display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:54px; min-height:44px; padding:3px 8px; border-radius:999px;
  border:1.5px solid var(--line); color:var(--ink2);
  transition:all .25s var(--ease);
}
.menubtn svg{width:19px; height:19px; display:block}
.menubtn .menulab{font-size:10.5px; font-weight:700; line-height:1.2; letter-spacing:.02em}
.menubtn:active{transform:scale(.94)}
/* パンくず：ヘッダーの下に固定される現在地表示 */
.crumbs{
  flex:none; display:flex; align-items:center; gap:7px;
  padding:8px 16px; background:var(--barbg); border-bottom:1px solid var(--line2);
  font-size:13.5px; overflow-x:auto; white-space:nowrap; scrollbar-width:none;
}
.crumbs::-webkit-scrollbar{display:none}
.crumb{color:var(--ink2); max-width:36vw; overflow:hidden; text-overflow:ellipsis; flex:none}
a.crumb:active{opacity:.6}
.crumb.now{color:var(--ink); font-weight:700}
.crumb-sep{color:var(--ink3); flex:none}
/* ドロワー（左からスッと出る補助メニュー） */
.drawer-veil{position:fixed; inset:0; z-index:80; background:rgba(4,16,10,.55); opacity:0; transition:opacity .3s var(--ease)}
.drawer-veil.open{opacity:1}
.drawer{
  position:absolute; top:0; left:0; bottom:0; width:min(84vw, 340px);
  background:var(--bg); color:var(--ink);
  border-right:1px solid var(--line); padding:16px 0 calc(14px + env(safe-area-inset-bottom)); overflow-y:auto;
  transform:translateX(-103%); transition:transform .42s var(--ease);
}
.drawer-veil.open .drawer{transform:none}
.d-head{display:flex; align-items:center; gap:10px; padding:2px 14px 10px}
.d-head .emblem{width:38px; height:38px; border-radius:10px; border:1px solid var(--line); flex:none}
.d-name{font-size:17px; font-weight:800; letter-spacing:.12em; flex:1}
.d-x{width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--ink2); flex:none}
.d-x svg{width:22px; height:22px; display:block}
.d-x:active{opacity:.6}
.d-prof{padding:0 14px 12px; font-size:14px; color:var(--ink2); border-bottom:1px solid var(--line2)}
.d-login{margin-left:8px; font-size:12px; font-weight:700; color:var(--ink); border:1px solid var(--line); padding:2px 8px; border-radius:99px; white-space:nowrap}
.d-sec{font-size:12.5px; font-weight:700; color:var(--ink2); letter-spacing:.06em; padding:16px 14px 6px}
.d-list{border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); background:var(--card)}
.d-list .srow{padding-left:14px; padding-right:14px}
/* モーダル（下から上がるシート：確認と完了の知らせ） */
.modal-veil{
  position:fixed; inset:0; z-index:90; background:rgba(4,16,10,.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .3s var(--ease);
}
.modal-veil.open{opacity:1}
.modal{
  background:var(--bg); color:var(--ink); width:100%; max-width:640px; max-height:86dvh; overflow-y:auto;
  border-radius:20px 20px 0 0; border-top:1px solid var(--line);
  padding:22px 18px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(28px); transition:transform .4s var(--ease);
}
.modal-veil.open .modal{transform:none}
.m-title{font-size:19px; font-weight:800; line-height:1.45}
.m-title.center{text-align:center}
.m-body{margin-top:10px; font-size:16px; line-height:1.7}
.m-body.center{text-align:center}
.m-actions{display:flex; flex-direction:column; gap:8px; margin-top:18px}
.m-done{display:flex; justify-content:center; margin:2px 0 10px}
.doneic{width:64px; height:64px; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.doneic circle{stroke-dasharray:151; stroke-dashoffset:151; animation:drawIn .7s var(--ease) .1s both}
.doneic path{stroke-dasharray:32; stroke-dashoffset:32; animation:drawIn .45s var(--ease) .6s both}
@keyframes drawIn{to{stroke-dashoffset:0}}
/* アコーディオン：見出しは大きなボタン、本文は格子行の高さで静かに開く */
.acc{margin-top:20px}
.acc-h{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:56px; padding:12px 2px; text-align:left;
  border-bottom:1px solid var(--line2);
}
.acc-t{flex:1; min-width:0; font-size:15.5px; font-weight:700; letter-spacing:.04em}
.acc-meta{font-size:13.5px; color:var(--ink2); font-weight:700; flex:none}
.acc-chev{color:var(--ink3); font-size:20px; flex:none; transition:transform .35s var(--ease)}
.acc.open .acc-chev{transform:rotate(90deg)}
.acc-b{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease)}
.acc.open .acc-b{grid-template-rows:1fr}
.acc-in{overflow:hidden; min-height:0}
.acc-in > .glist{margin-top:10px}
.acc-in > .card{margin-top:10px}
/* ラジオボタン（大きな行で選ぶ：検査結果・天気の手動選択） */
.radios{display:flex; flex-direction:column; gap:8px}
.radio-row{
  position:relative; display:flex; align-items:center; gap:12px; width:100%;
  min-height:58px; padding:10px 14px; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; background:var(--card);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.radio-row input{position:absolute; opacity:0; width:1px; height:1px}
.r-dot{
  width:26px; height:26px; border-radius:50%; flex:none; position:relative;
  border:2px solid var(--ink2); transition:border-color .25s var(--ease);
}
.r-dot::after{
  content:''; position:absolute; inset:5px; border-radius:50%; background:var(--ink);
  transform:scale(0); transition:transform .25s var(--ease);
}
.radio-row input:checked ~ .r-dot, .radio-row.sel .r-dot{border-color:var(--ink)}
.radio-row input:checked ~ .r-dot::after, .radio-row.sel .r-dot::after{transform:scale(1)}
.radio-row:has(input:checked), .radio-row.sel{border-color:var(--ink); background:var(--chip)}
.radio-row:has(input:focus-visible){outline:2px solid var(--ink); outline-offset:2px}
.r-lab{font-size:16.5px; font-weight:600}
/* プルダウン：標準の select に、開けることが分かる矢印を付ける（操作は標準のまま） */
.field select{
  appearance:none; -webkit-appearance:none; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c6d2c6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:18px;
}
/* 進み具合の円（ドーナツ）：線が静かに進み、真ん中の数字も一緒に数える */
.ringwrap{position:relative; display:inline-block; flex:none; line-height:0}
.ring{display:block}
.ring circle{fill:none; stroke-width:5px}
.ring .ring-bg{stroke:var(--line2)}
.ring .ring-fg{stroke:var(--ink); stroke-linecap:round; transition:stroke-dashoffset 1.1s var(--ease)}
.ring-c{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; line-height:1}
/* ばらつきのミニバー（数字と形が一緒に動く） */
.minibar{display:flex; align-items:center; gap:8px; margin-top:7px}
.minibar .mb-k{font-size:12px; color:var(--ink2); flex:none; width:52px}
.minibar .mb-v{font-size:13px; font-weight:700; flex:none; min-width:38px; text-align:right; font-variant-numeric:tabular-nums}
.pbar.mini{flex:1; margin-top:0; height:5px}
/* カルーセル（4コマ説明）：横に滑らせて送る。ドットが現在地を示す */
.carousel{overflow:hidden; touch-action:pan-y}
.c-track{display:flex; transition:transform .5s var(--ease)}
.c-slide{flex:0 0 100%; min-width:0}
.carousel .fpanel{animation:none; padding-top:26px; min-height:302px}
/* 写真の送り（前後の写真へ：ボタンとスワイプ） */
.phview{margin-top:12px; border-radius:12px; overflow:hidden; border:1px solid var(--line); touch-action:pan-y}
.pnav{display:flex; align-items:center; gap:10px; margin-top:10px}
.pnav-btn{
  flex:1; min-height:52px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:12px; background:var(--card);
  font-weight:600; font-size:15px; padding:10px;
}
a.pnav-btn:active{background:var(--bg2)}
.pnav-btn.off{opacity:.35}
.pnav-n{flex:none; font-size:14px; color:var(--ink2); font-variant-numeric:tabular-nums}
/* 管理図の測定点：順にスッと現れる（印刷ではアニメーション対象にしない） */
.chart circle.pt{transform-box:fill-box; transform-origin:center; animation:ptIn .55s var(--ease) both}
@keyframes ptIn{from{opacity:0; transform:scale(.2)} to{opacity:1; transform:scale(1)}}
/* 屋外モード：新しい部品も最大コントラストに合わせる */
body.outdoor .menubtn{border-color:#8f8f8f; color:#000}
body.outdoor .crumbs{background:#fff; border-bottom:2px solid #8f8f8f}
body.outdoor .crumb{color:#1a1a1a}
body.outdoor .crumb.now{color:#000}
body.outdoor .drawer{background:#fff; border-right:2px solid #000}
body.outdoor .d-list{background:#fff; border-top:2px solid #8f8f8f; border-bottom:2px solid #8f8f8f}
body.outdoor .d-head .emblem{border-color:#8f8f8f}
body.outdoor .d-login{border-color:#000; color:#000}
body.outdoor .modal{background:#fff; border-top:3px solid #000}
body.outdoor .doneic{stroke:#000}
body.outdoor .acc-h{border-bottom:1.5px solid #a3a3a3}
body.outdoor .radio-row{border:2px solid #8f8f8f; background:#fff}
body.outdoor .radio-row:has(input:checked), body.outdoor .radio-row.sel{border-color:#000; background:#e4e4e4}
body.outdoor .r-dot{border-color:#000}
body.outdoor .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 6 6 6-6'/%3E%3C/svg%3E")}
body.outdoor .ring .ring-bg{stroke:#e4e4e4}
body.outdoor .pnav-btn{border:2px solid #8f8f8f; background:#fff}
body.outdoor .phview{border-width:2px; border-color:#8f8f8f}
@media print{ .modal-veil, .drawer-veil{display:none !important} }

/* ================= 工事写真（父の仕様書） =================
   仕様書の指定：背景は淡い青・文字は大きめ・項目名は太字・プレースホルダは濃く。
   工事写真の画面群（.screen.kj）だけ変数を差し替えて実現する。HAJIME 本体の
   黒板グリーンの世界と既存データには影響しない。 */
.screen.kj{
  background:#dcecfb;
  color:#16283d;
  --ink:#16283d; --ink2:#33526e; --ink3:#4d6f8d;
  --line:rgba(22,60,110,.45); --line2:rgba(22,60,110,.16);
  --bg:#dcecfb; --bg2:#c9def5; --card:#ffffff; --chip:#bcd6f2;
  --barbg:rgba(220,236,251,.95);
  --btnbg:#12456e; --btnink:#ffffff;
  --grey:#5a748c; --ok:#2e7d32; --ng:#c62828; --warn:#a85f00; --ngline:rgba(198,40,40,.5);
  font-size:18.5px;
}
.screen.kj .topbar{background:var(--barbg)}
.screen.kj .tabbar{background:var(--barbg)}
.screen.kj .field label{color:var(--ink); font-weight:700; font-size:14.5px}
.screen.kj input::placeholder,.screen.kj textarea::placeholder{color:#4d6f8d; opacity:1}
.screen.kj .r-title{font-size:19px}
.screen.kj .chip{color:var(--ink); font-weight:600}
.screen.kj .chip.on{color:#fff}
.screen.kj .kj-jobname{font-size:20px; font-weight:700}
.screen.kj .val{font-size:14.5px}
.kj-switch{
  margin-top:12px; padding:12px 14px; border-radius:12px;
  background:#12456e; color:#fff; font-weight:700; font-size:16.5px; line-height:1.5;
}
.kj-impthumbs{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.kj-impthumbs img{width:76px; height:76px; object-fit:cover; border-radius:10px; border:1px solid var(--line)}
.kj-blankthumb{display:flex; align-items:center; justify-content:center; color:var(--ink2); font-weight:700; font-size:15px; background:var(--bg2)}
.kj-blankview{
  margin-top:12px; border:1.5px dashed var(--line); border-radius:12px; min-height:180px;
  display:flex; align-items:center; justify-content:center; color:var(--ink2); font-weight:700; font-size:17px; background:var(--card);
}
/* 工種・種別の木の画面：工種ごとにカード、種別は大きなチップ。指で押せる大きさに */
.kj-treework{margin-top:12px}
.kj-treehead{display:flex; align-items:center; gap:10px}
.kj-treename{font-size:20px; font-weight:800; flex:1; min-width:0; overflow-wrap:anywhere}
.kj-typechips{margin-top:12px}
.kj-typechip{
  display:inline-flex; align-items:center; gap:4px; margin:0 8px 10px 0;
  background:var(--bg2); border:1.5px solid var(--line); border-radius:999px;
  padding:8px 6px 8px 16px; font-weight:700; font-size:17px; color:var(--ink);
}
.kj-typechip button{
  appearance:none; border:none; background:var(--card); color:var(--ink2);
  width:34px; height:34px; border-radius:999px; font-size:18px; line-height:1; cursor:pointer;
}
.kj-addrow{display:flex; gap:8px; margin-top:4px}
.kj-addrow input{flex:1; min-width:0}
.kj-treepreview{max-height:46vh; overflow:auto; margin-top:4px}
.kj-tpwork{padding:8px 0; border-top:1px solid var(--line2)}
.kj-tpwork:first-child{border-top:none}
/* 測定表の入力（取り込み・編集）：小さい文字と余白で、写真の幅（カード幅）に収める */
.kj-mtable{width:100%; border-collapse:collapse; table-layout:fixed}
.kj-mtable th,.kj-mtable td{border:1px solid var(--line2); padding:3px}
.kj-mtable th{font-size:11.5px; font-weight:700; text-align:left; padding:4px 5px}
.kj-mtable td input{width:100%; border:none; background:transparent; padding:6px 4px; font-size:13.5px; min-height:36px; color:var(--ink)}
.kj-mtable td input:focus{outline:1px solid var(--ink)}
.kj-mtable .kj-red,.kj-mtable input.kj-red{color:#d40000; font-weight:700}
.kj-mdel{font-size:12px; color:var(--ng); padding:6px 4px; white-space:nowrap}
/* アルバム帳（画面表示）：A4の比率で1ページに写真3枚。左に写真、右に内容5項目 */
.kj-page{
  background:#fff; color:#000; border:1px solid #9db4c8; border-radius:4px;
  padding:14px 10px 14px 22px; margin:14px 0 6px;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
}
.kj-page.back{padding:14px 22px 14px 10px}
.kj-page .kj-prow{display:flex; gap:8px; aspect-ratio:183/89.5; margin-bottom:10px; cursor:pointer}
.kj-page .kj-prow:last-child{margin-bottom:0}
.kj-page.back .kj-prow{flex-direction:row-reverse}
.kj-page .kj-prow.kj-sel{outline:3px solid #12456e; outline-offset:2px; border-radius:2px}
.kj-page .kj-ph{width:61%; flex:none; align-self:center; aspect-ratio:4/3; border:1.2px solid #000; position:relative; background:#fff; overflow:hidden}
.kj-page .kj-ph img{width:100%; height:100%; object-fit:contain; display:block}
.kj-page .kj-pno{position:absolute; left:4px; top:2px; font-size:11px; font-weight:700; color:#000; background:rgba(255,255,255,.85); padding:0 4px}
.kj-page .kj-txt{flex:1; min-width:0; border:1.2px solid #000; display:flex; flex-direction:column}
.kj-page .kj-tr{border-top:1px solid #000; padding:2px 5px; overflow:hidden; display:flex; gap:5px; align-items:stretch; min-height:0}
.kj-page .kj-tr:first-child{border-top:none}
.kj-page .kj-tk{font-weight:700; flex:none; font-size:12px}
.kj-page .kj-tv{flex:1; min-width:0; font-size:12.5px; line-height:1.4; overflow-wrap:anywhere; overflow:hidden}
.kj-page .kj-tr-note{display:block}
.kj-page .kj-note{font-size:12px; line-height:1.45; overflow-wrap:anywhere}
.kj-page .kj-hint{color:#9a9a9a; font-size:.92em}
.kj-page .kj-mt{display:flex; flex-direction:column; border:1px solid #000; margin-top:3px; height:calc(100% - 3px)}
.kj-page .kj-note + .kj-mt{height:auto; flex:1}
.kj-page .kj-mh,.kj-page .kj-mr{display:flex; flex:1; min-height:0}
.kj-page .kj-mr{border-top:1px solid #000}
.kj-page .kj-mh span,.kj-page .kj-mr span{padding:1px 3px; overflow:hidden; white-space:nowrap; font-size:10.5px; display:flex; align-items:center}
.kj-page .kj-mt.many .kj-mh span,.kj-page .kj-mt.many .kj-mr span{font-size:9.5px}
.kj-page .c-sym{flex:1.1; border-right:1px solid #000}
.kj-page .c-item{flex:1.7; border-right:1px solid #000}
.kj-page .c-des{flex:1; border-right:1px solid #000}
.kj-page .c-act{flex:1}
.kj-page .kj-red{color:#d40000; font-weight:700}
.kj-actions{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 4px}
.kj-actions .btn{min-height:48px; padding:10px 16px; font-size:15px}

/* ===== 出来形管理の書類（画面プレビュー）：白い紙の見た目・大きな文字（父の流儀） ===== */
.kj-doc{background:#fff; color:#12233f; border:1px solid #b9c8dd; border-radius:12px; padding:14px 12px; margin-top:8px; overflow-x:auto}
.kj-doc svg{width:100%; height:auto; display:block; margin:8px 0}
.kj-doc .kd-info-line{font-size:14px; font-weight:700; line-height:1.7; color:#12233f}
.kj-doc .kd-t{width:100%; border-collapse:collapse; margin-top:8px; font-size:14px}
.kj-doc .kd-t th,.kj-doc .kd-t td{border:1px solid #8aa0bd; padding:7px 8px; text-align:right; white-space:nowrap}
.kj-doc .kd-t th{background:#dbe9fb; font-weight:700; text-align:center}
.kj-doc .kd-t td:first-child,.kj-doc .kd-t th:first-child{text-align:left}
.kj-doc .kd-t td.lab{text-align:left}
.kj-doc .kd-note{font-size:13px; color:#3a4a63; margin-top:8px; line-height:1.6}
.kj-doc .kd-ok{color:#0a7a2f; font-weight:700}
.kj-doc .kd-ng{color:#d40000; font-weight:700}
.kj-doc .kd-inng{color:#b45309; font-weight:700}
.kj-doc .kd-flex{display:flex; gap:10px; align-items:stretch; margin-top:8px}
.kj-doc .kd-flex-main{flex:1 1 auto}
.kj-doc .kd-flex-main .kd-t{margin-top:0}
.kj-doc .kd-fig{flex:0 0 168px; border:1.5px solid #8aa0bd; border-radius:8px; background:#fff; padding:10px 12px; min-height:230px}
.kj-doc .kd-fig span{font-size:14px; font-weight:700; color:#12233f}
.kj-doc .kd-fig p{font-size:12px; color:#3a4a63; line-height:1.6; margin-top:6px}
.kj-doc .kd-subtitle{font-size:15px; font-weight:700; margin-top:12px; color:#12233f}
/* 出来形管理図（内部名HQ）：入力マトリクスと級の編集 */
/* 白い紙面（.kj-doc）の中では文字色を紙面用に固定する（本体の暗色テーマの文字色を継ぐと読めないため） */
.kj-doc .hqt{color:#12233f}
.kj-doc .hqt th{color:#12233f}
.hq-in-t td{padding:4px 5px}
.hq-in-t input.hq-num{width:74px; padding:7px 6px; font-size:15px; text-align:right; border:1px solid #b9c8dd; border-radius:7px; background:#fff; color:#12233f}
.hq-in-t .hq-sticky{position:sticky; left:0; background:#eef3fa; z-index:1; text-align:left}
.hq-in-t thead .hq-sticky{background:#dbe9fb}
.hq-in-t .hq-ptwrap{display:flex; align-items:center; gap:4px}
.hq-in-t input.hq-label{width:64px; padding:7px 6px; font-size:15px; border:1px solid #b9c8dd; border-radius:7px; background:#fff; color:#12233f}
.hq-in-t .hq-ptdel{flex:none; width:26px; height:26px; border-radius:50%; border:1px solid #c3cfe0; background:#fff; color:#7a8798; font-size:14px; line-height:1; padding:0}
.hq-bins{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.hq-bin{display:flex; align-items:center; gap:4px; background:#eef3fa; border-radius:8px; padding:4px 6px}
.hq-bin span{font-size:11px; color:#5a6a82; min-width:16px; text-align:right}
.hq-bin input{width:58px; padding:6px 5px; font-size:14px; text-align:right; border:1px solid #b9c8dd; border-radius:6px; background:#fff; color:#12233f}
/* 出来形管理図の見やすさ改善（画面表示のみ。印刷様式は変えない） */
.kj-doc.hqfit{overflow:visible}
.hq-chipbar{position:sticky; top:0; z-index:6; display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; padding:6px 0 8px; background:#fff; scrollbar-width:none}
.hq-chipbar::-webkit-scrollbar{display:none}
.hq-chip{flex:none; min-height:44px; padding:8px 14px; border-radius:999px; border:1.5px solid #12456e; background:#fff; color:#12456e; font-size:14.5px; font-weight:700; white-space:nowrap}
.hq-chip.on{background:#12456e; color:#fff}
.hq-spec-line{font-size:12.5px; color:#3a4a63; font-weight:600; padding:0 2px 8px}
.hq-in2{table-layout:fixed; width:100%}
.hq-in2 th,.hq-in2 td{padding:4px 4px}
.hq-in2 thead th{position:sticky; top:58px; z-index:5; background:#dbe9fb}
.hq-in2 .hq-ptwrap{display:flex; align-items:center; gap:4px}
.hq-in2 input.hq-label{flex:1; min-width:0; min-height:44px; padding:7px 6px; font-size:15px; border:1px solid #b9c8dd; border-radius:7px; background:#fff; color:#12233f}
.hq-in2 input.hq-num{width:100%; min-height:44px; padding:7px 4px; font-size:15px; text-align:right; border:1px solid #b9c8dd; border-radius:7px; background:#fff; color:#12233f}
.hq-in2 .hq-ptdel{flex:none; width:44px; height:44px; border-radius:50%; border:1px solid #c3cfe0; background:#fff; color:#7a8798; font-size:16px; line-height:1; padding:0}
.hq-in2 td.hq-d{font-weight:800; font-size:14.5px; text-align:right; color:#12233f}
.hq-in2 tr.hq-bad td{background:#fdecec}
.hq-in2 tr.hq-editing td{background:#fff7e0}
.hq-sumstrip{display:flex; flex-direction:column; gap:6px; margin:8px 0 10px}
.hq-sumcell{display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; min-height:44px; padding:8px 10px; border-radius:10px; border:1.5px solid #b9c8dd; background:#f4f8fd; color:#12233f; width:100%}
.hq-sumcell b{font-size:14.5px}
.hq-sumcell span{font-size:12px; color:#3a4a63}
.hq-sumcell.on{border-color:#12456e; background:#e3eefb; box-shadow:inset 0 0 0 1px #12456e}
.hq-legend{display:flex; flex-wrap:wrap; gap:6px 12px; margin:8px 0 2px; font-size:12px; color:#3a4a63; font-weight:600}
.hq-lg{display:inline-flex; align-items:center; gap:5px}
.lg-line{display:inline-block; width:22px; height:0; border-top:2.5px solid #12233f}
.lg-line.red{border-top-color:#d40000}
.lg-line.blue{border-top-color:#5b83b4}
.lg-line.dash{border-top-style:dashed}
.lg-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#12233f}
.hq-foldrow td{text-align:center; color:#8a97a8; font-size:12px; background:#f7fafd}
.hq-statrow{display:flex; gap:8px}
.hq-stat{flex:1; text-align:center; background:var(--bg2); border-radius:12px; padding:10px 4px}
.hq-stat b{display:block; font-size:26px; line-height:1.15}
.hq-stat span{font-size:12px; color:var(--ink2)}
.hq-stat b.hq-out-n{color:var(--ng)}
.hq-empty-t{font-size:19px; font-weight:800}
.hq-steps{margin:10px 0 0; padding-left:22px}
.hq-steps li{margin-top:4px}
.hq-none{font-size:13px; font-weight:700; color:var(--warn)}

/* ===== 出来形管理図の見た目仕上げ（2026-11-04・画面表示のみ。印刷様式・出来形の紙面は変えない） =====
   紙は温かい白＋柔らかい影で黒板の上に浮かせ、表の水色ベタ帯をやめて
   小さいグレーのラベル＋濃い本文の静かな階層にする。差し色は HAJIME の緑。 */
/* 紙面そのもの（出来形管理図の紙だけ） */
.kj-doc.hqfit,.kj-doc[data-hqdoc],.kj-doc[data-hqsum]{
  background:linear-gradient(180deg,#fffefa,#fdfcf5);
  border:1px solid #ded9c8; border-radius:18px;
  box-shadow:0 14px 34px rgba(3,26,17,.38),0 2px 8px rgba(3,26,17,.22);
}
/* 紙の上の情報行：小さいグレー＋濃い本文 */
.kj-doc[data-hqdoc] .kd-info-line,.kj-doc[data-hqsum] .kd-info-line{font-size:13.5px; font-weight:600; color:#46586c; line-height:1.75}
.kj-doc[data-hqdoc] .kd-info-line:first-of-type{font-size:15px; font-weight:700; color:#12233f}
.kj-doc[data-hqdoc] .kd-subtitle{font-size:13px; font-weight:700; letter-spacing:.06em; color:#61707d}
.kj-doc[data-hqdoc="ichiran"] .kd-fig{border:1px solid #ddd8c6; border-radius:14px; background:#fffefa}
.kj-doc[data-hqdoc="ichiran"] .kd-fig p{color:#61707d}
/* 表：水色の帯をやめ、極細の淡い罫線と余白で分ける */
.kj-doc.hqfit .kd-t,.kj-doc[data-hqdoc] .kd-t{font-size:14.5px}
.kj-doc.hqfit .kd-t th,.kj-doc.hqfit .kd-t td,
.kj-doc[data-hqdoc] .kd-t th,.kj-doc[data-hqdoc] .kd-t td{border-color:#e8e4d6; padding:8px}
.kj-doc.hqfit .kd-t th,.kj-doc[data-hqdoc] .kd-t th{background:#f8f6ee}
.kj-doc.hqfit .kd-t thead th,.kj-doc[data-hqdoc] .kd-t thead th{border-bottom:1.5px solid #ddd6bf}
.kj-doc.hqfit .kd-t thead tr:not(:first-child) th,.kj-doc[data-hqdoc] .kd-t thead tr:not(:first-child) th{
  background:#fcfaf2; font-size:12px; font-weight:600; letter-spacing:.05em; color:#61707d}
.kj-doc.hqfit .kd-t tbody th.lab,.kj-doc[data-hqdoc] .kd-t tbody th.lab{font-weight:600; color:#3d4f63}
.kj-doc.hqfit .kd-t td,.kj-doc[data-hqdoc] .kd-t td{font-variant-numeric:tabular-nums}
/* 入力画面：チップ・見出し・入力欄 */
.hq-chipbar{background:#fffefa}
.hq-chip{border:1px solid #c3cec0; background:#fffefa; color:#20503a; box-shadow:0 1px 2px rgba(10,40,25,.06)}
.hq-chip.on{background:linear-gradient(180deg,#12714a,#0c6b45); border-color:#0c6b45; color:#fff; box-shadow:0 3px 8px rgba(12,107,69,.28)}
.hq-spec-line{background:#f8f6ee; border-radius:10px; padding:8px 10px; margin-bottom:2px; color:#40536a}
.kj-doc.hqfit .hq-in2 thead th{color:#61707d; font-size:12.5px; letter-spacing:.06em}
.hq-in2 input.hq-label,.hq-in2 input.hq-num{border-color:#ddd8c6; border-radius:10px; background:#fffefa}
.hq-in2 input.hq-label:focus,.hq-in2 input.hq-num:focus{border-color:#0c6b45; box-shadow:0 0 0 3px rgba(12,107,69,.15); outline:none}
.hq-in2 .hq-ptdel{border-color:transparent; background:transparent; color:#a39a86}
.hq-in2 .hq-ptdel:active{background:#f3efe2}
.hq-in2 td.hq-d{font-size:15px}
.hq-in2 tr.hq-bad td{background:#fdf1ec}
.hq-in2 tr.hq-editing td{background:#fbf4dc}
/* 総括の項目切替セル */
.hq-sumcell{border:1px solid #e0dbca; background:#fffefa; border-radius:14px; padding:10px 12px; box-shadow:0 1px 3px rgba(10,35,22,.05)}
.hq-sumcell span{color:#61707d}
.hq-sumcell.on{border-color:#0c6b45; background:linear-gradient(180deg,#f0f7ef,#e9f3ea); box-shadow:inset 0 0 0 1px #0c6b45,0 2px 6px rgba(12,107,69,.12)}
/* 管理図の凡例は小さなチップに */
.hq-legend{gap:6px}
.hq-lg{background:#f8f6ee; border:1px solid #e8e4d6; border-radius:999px; padding:5px 11px}
.lg-line.red{border-top-color:#d64541}
.lg-line.blue{border-top-color:#6b93c4}
.lg-dot{background:#22384f}
/* 度数表：折りたたみ行と級の編集 */
.hq-foldrow td{background:#fcfaf2; color:#87919b}
.hq-bin{background:#f8f6ee}
.hq-bin span{color:#61707d}
.hq-bin input{border-color:#ddd8c6; border-radius:8px; background:#fffefa}
/* トップ（緑の上）：状態タイルを柔らかく */
.hq-stat{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:12px 4px}
.hq-empty-t{letter-spacing:.02em}
.hq-steps li::marker{color:var(--ink2); font-weight:700}