/* ADONIS SYSTEM（作り直し版）の見た目の土台。値の正本は next/DESIGN.md。色はここ1か所だけで決める */
:root{
  --bg:#f4f6f9; --surface:#fff; --text:#1f2430; --muted:#6b7280; --line:#d5dae2;
  --head-bg:#1f2a3a; --head-text:#fff; --head-sub:#aab4c3;
  --accent:#1f2a3a; --accent-text:#fff; --accent-soft:#e8edf4; --focus:#2e7dd1;
  --danger:#c62828; --warn:#b26a00; --ok:#2e7d32; --info:#1565c0;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Yu Gothic UI","Meiryo",sans-serif;line-height:1.6}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}

/* 上の帯 */
header.top{background:var(--head-bg);color:var(--head-text);padding:12px 24px;display:flex;align-items:center;gap:16px}
header.top h1{font-size:1.15rem;margin:0;letter-spacing:.06em}
header.top .crumb{color:var(--head-sub);font-size:.9rem}
header.top .who{margin-left:auto;position:relative}
.head-btn{border:1px solid currentColor;background:transparent;color:var(--head-text);border-radius:8px;padding:4px 12px;cursor:pointer}
.dropdown{position:absolute;right:0;top:calc(100% + 4px);z-index:10;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.12);min-width:210px}
.dropdown>*{display:block;width:100%;text-align:left;padding:8px 14px;border:none;background:none;font-size:.9rem}
.dropdown>*+*{border-top:1px solid var(--line)}
.dropdown button{cursor:pointer}.dropdown button:hover{background:var(--accent-soft)}
.dropdown .info{color:var(--muted)}

main{max-width:1240px;margin:0 auto;padding:24px 16px 60px}
h2{font-size:1.25rem;margin:0 0 4px}
.lead{color:var(--muted);margin:0 0 20px;font-size:.9rem}

/* メニューの四角いボタン */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;min-height:140px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:border-color .15s,transform .15s,box-shadow .15s;text-decoration:none;color:inherit}
.tile:hover,.tile:focus-visible{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08);outline:none}
.tile .ic{width:44px;height:44px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;font-size:1.4rem}
.tile .nm{font-size:1.15rem;font-weight:700;margin-top:4px}
.tile .ds{font-size:.85rem;color:var(--muted)}
.tile .badge{margin-top:auto;align-self:flex-start;font-size:.8rem;font-weight:700;border-radius:99px;padding:1px 10px;background:#fdecea;color:var(--danger)}
.tile .soon{margin-top:auto;align-self:flex-start;font-size:.8rem;color:var(--muted)}

/* 箱・入力 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card h3{font-size:1.05rem;margin:0 0 14px}
.field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:-1px;border-color:transparent}
.note{font-size:.8rem;color:var(--muted)}

/* ボタン */
.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 18px;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:700;padding:11px 26px}
.btn.danger{color:var(--danger)}
.btn:disabled{opacity:.5;cursor:default}
/* 保存などのボタンは画面の下にくっつけて、いつも見えるようにする */
.sticky-actions{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 10px rgba(0,0,0,.06);padding:12px 16px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;z-index:5}

/* 表（全部に線） */
table{border-collapse:collapse;width:100%}
th,td{border:1px solid var(--line);padding:6px 8px;text-align:center;white-space:nowrap}
th{background:var(--bg);font-weight:600;font-size:.9rem}
td.l{text-align:left}
td.hin{font-weight:700;font-size:1.1rem;letter-spacing:.03em}
td.na{background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 4px,var(--surface) 4px,var(--surface) 8px)}

/* Excelのような表（マスをすき間なく並べる）。Tab で右へ・Enter で下へ */
table.sheet td{padding:0}
table.sheet td.l,table.sheet td.c{padding:4px 8px;background:var(--bg)}
table.sheet td input{width:100%;border:none;border-radius:0;padding:7px 8px;background:transparent}
table.sheet td input:focus{outline:2px solid var(--focus);outline-offset:-2px;background:#eef5fd}
table.sheet td input[readonly]{color:var(--muted)}

/* タブ（画面の中の切り替え） */
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.tabs a,.tabs button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 16px;text-decoration:none;color:inherit;cursor:pointer}
.tabs .on{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:700}

/* チェックの並び（サイズ・工程） */
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:6px 12px;cursor:pointer;background:var(--surface)}
.checks label.on{border-color:var(--accent);background:var(--accent-soft);font-weight:700}
.checks input{margin:0}
.sizecap{display:inline-block;min-width:44px;text-align:center;border-radius:6px;padding:1px 6px;font-weight:700}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:none;background:var(--surface);padding:7px 16px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--accent);color:var(--accent-text);font-weight:700}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px 18px}
.field.wide{grid-column:span 2}
.tag{display:inline-block;font-size:.72rem;font-weight:700;border-radius:99px;padding:0 8px;margin-left:6px;vertical-align:middle}
.tag.ok{background:#e6f4e7;color:var(--ok)}
.tag.ask{background:#fff3e0;color:var(--warn)}
@media (max-width:640px){ .field.wide{grid-column:auto} }

/* 注意＝色＋しるし＋言葉 */
.warn-short{color:var(--danger);font-weight:700}.warn-short::before{content:"⚠ "}
.warn-coming{color:var(--info);font-weight:700}.warn-coming::before{content:"📦 "}
.banner{border-radius:10px;padding:10px 14px;margin-bottom:20px;background:#fff7e0;border:1px solid #f0d58a}

/* お知らせ＝上の真ん中に出て消える */
.toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:var(--accent);color:var(--accent-text);padding:10px 18px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.2);opacity:0;transition:opacity .2s;pointer-events:none;z-index:100}
.toast.show{opacity:1}

/* 小さな入力画面（暗証番号の変更など） */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:center;z-index:50}
.modal{background:var(--surface);border-radius:14px;padding:24px;width:min(380px,calc(100% - 32px));box-shadow:0 10px 30px rgba(0,0,0,.2)}
.modal h3{margin:0 0 14px;font-size:1.05rem}
.modal .field{margin-bottom:12px}
.modal .row{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

/* ログイン画面＝薄いグレーの地に紺の名前ボタン */
body.login{display:grid;place-items:center;min-height:100vh}
.login-box{text-align:center;padding:24px 16px;width:min(640px,100%)}
.login-box h1{font-size:1.6rem;letter-spacing:.08em;margin:0 0 6px}
.names{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:24px 0}
.names button{background:var(--accent);color:var(--accent-text);border:none;border-radius:10px;padding:14px 22px;font-weight:700;font-size:1.05rem;cursor:pointer;min-width:140px}
.names button:hover,.names button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pin-box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;max-width:340px;margin:0 auto;text-align:left}
.pin-box input{width:100%;font-size:1.4rem;letter-spacing:.3em;text-align:center;border:1px solid var(--line);border-radius:8px;padding:8px}

@media print{
  /* 印刷は書類の部分だけ（帯・メニュー・ボタンは出さない）。サイズの色も印刷する */
  header.top,.sticky-actions,.no-print{display:none !important}
  body{background:#fff}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (max-width:640px){ header.top{padding:10px 16px;flex-wrap:wrap} }