/* 新・出荷管理アプリ 共通の見た目（画面試作と同じ色・文字） */
:root{
  --bg:#EDEFEB; --surface:#FFFFFF; --surface-2:#F6F7F4; --ink:#1C2321; --sub:#5B6560; --line:#D3D9D4;
  --accent:#0E6B66; --accent-ink:#FFFFFF; --accent-weak:#DCEEEB;
  --warn:#A9480F; --warn-weak:#FBE8DA; --danger:#B3261E; --danger-weak:#FBE2DF; --ok:#2B7A31; --ok-weak:#E2F0E3;
  --chip-line:rgba(0,0,0,.18);
  /* フォント：端末の文字（Instagram と同じ考え方・Google Fonts は読み込まない・2026-10-08） */
  --f-display:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Segoe UI",Roboto,"Noto Sans JP","Noto Sans CJK JP","Yu Gothic UI","Meiryo",sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Segoe UI",Roboto,"Noto Sans JP","Noto Sans CJK JP","Yu Gothic UI","Meiryo",sans-serif;
  /* 数字・番号も同じ端末の文字に（2026-10-17 野村さん「フォントを統一」。桁は tabular-nums でそろえる） */
  --f-mono:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Segoe UI",Roboto,"Noto Sans JP","Noto Sans CJK JP","Yu Gothic UI","Meiryo",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#131816; --surface:#1C2320; --surface-2:#232B28; --ink:#E5EBE8; --sub:#9CA8A3; --line:#33403B;
  --accent:#4EC0B6; --accent-ink:#0B1F1D; --accent-weak:#163B37;
  --warn:#F2A574; --warn-weak:#3C2516; --danger:#FF8A80; --danger-weak:#3D1B19; --ok:#86C98A; --ok-weak:#1B3320;
  --chip-line:rgba(255,255,255,.25); color-scheme:dark}}
/* 明るさ・色は設定（歯車）で各自が選ぶ（2026-10-09）。data-theme＝明るい/暗いを決めた人、data-accent＝色を選んだ人 */
:root[data-theme="dark"]{
  --bg:#131816; --surface:#1C2320; --surface-2:#232B28; --ink:#E5EBE8; --sub:#9CA8A3; --line:#33403B;
  --accent:#4EC0B6; --accent-ink:#0B1F1D; --accent-weak:#163B37;
  --warn:#F2A574; --warn-weak:#3C2516; --danger:#FF8A80; --danger-weak:#3D1B19; --ok:#86C98A; --ok-weak:#1B3320;
  --chip-line:rgba(255,255,255,.25); color-scheme:dark}
:root[data-accent]{--accent:var(--acc-l);--accent-ink:#FFFFFF;--accent-weak:color-mix(in srgb,var(--acc-l) 14%,#FFFFFF)}
@media (prefers-color-scheme: dark){:root[data-accent]:not([data-theme="light"]){--accent:var(--acc-d);--accent-ink:#0B1F1D;--accent-weak:color-mix(in srgb,var(--acc-d) 22%,#1C2320)}}
:root[data-accent][data-theme="dark"]{--accent:var(--acc-d);--accent-ink:#0B1F1D;--accent-weak:color-mix(in srgb,var(--acc-d) 22%,#1C2320)}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%;font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.3}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.appbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;border-bottom:1px solid var(--line);background:var(--surface)}
.appbar{flex-wrap:wrap;row-gap:6px}
.appbar .ttl{font-family:var(--f-display);font-weight:900;font-size:17px;display:flex;gap:10px;align-items:center;white-space:nowrap}
.appbar .meta{font-size:12px;color:var(--sub)}
.appbar .back{border:0;background:none;color:var(--accent);font-weight:700;padding:4px 0;white-space:nowrap}
main{max-width:860px;margin:0 auto;padding:14px 16px calc(40px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.lab{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:.06em}
.pill{display:inline-flex;align-items:center;font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px;white-space:nowrap}
.pill.ok{background:var(--ok-weak);color:var(--ok)} .pill.warn{background:var(--warn-weak);color:var(--warn)} .pill.info{background:var(--accent-weak);color:var(--accent)}
.btn{border:0;border-radius:12px;padding:13px 16px;font-weight:700;font-size:15px;background:var(--accent);color:var(--accent-ink);text-align:center;text-decoration:none;display:inline-block}
.btn.ghost{background:var(--surface);color:var(--accent);border:1.5px solid var(--accent)}
.btn[disabled]{opacity:.38;cursor:not-allowed}
.banner{border-radius:12px;padding:10px 12px;font-size:13px}
.banner.info{background:var(--accent-weak)} .banner.warn{background:var(--warn-weak)} .banner.ok{background:var(--ok-weak)} .banner.danger{background:var(--danger-weak)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;z-index:20;max-width:calc(100% - 32px)}
.chip{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid var(--chip-line);flex:none;background:linear-gradient(90deg,var(--c1) 50%,var(--c2) 50%)}
/* 並ぶ入力欄の高さをそろえる（日付48・選ぶ欄40・文字46とばらばらだった）。iPhone SE（幅375）〜大きい画面まで同じ */
input.in[type="date"], input.in[type="time"], select.in { height: 46px; }
/* iPhone（Safari）：空の日付欄がつぶれて低くなり、幅もずれる（2026-10-08 野村さんのスクショ）。ほかの入力欄と同じ高さ・左寄せにそろえる */
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; display: block; min-height: 46px; line-height: 1.3; text-align: left; box-sizing: border-box; }
  input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; min-height: 1.3em; }
  .shipdate input[type="date"] { min-height: 38px; min-width: 9.5em; width: auto; }
}
/* 画面の上の切り替え（タブ）：塗りつぶしの大きなボタンは見出しに見えるので、文字＋下線に（2026-10-08 野村さん） */
.utabs{display:flex!important;gap:20px;border:0!important;border-bottom:1.5px solid var(--line)!important;border-radius:0!important;background:transparent!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0 2px!important}
.utabs::-webkit-scrollbar{display:none}   /* PCのChromeで右端にスクロールの矢印が出ていた（2026-10-10） */
.utabs button{flex:none!important;background:transparent!important;border:0!important;border-radius:0!important;padding:8px 0!important;color:var(--sub)!important;font-weight:700;font-size:15px;border-bottom:3px solid transparent!important;margin-bottom:-1.5px;box-shadow:none!important;min-height:0!important}
.utabs button[aria-pressed="true"]{color:var(--ink)!important;border-bottom-color:var(--ink)!important}

/* iPhone：16pxより小さい入力欄を押すと自動で拡大され、右がはみ出したまま戻らない（2026-10-09）。iPhoneだけ入力欄を16pxに */
@supports (-webkit-touch-callout: none) { input, textarea, select { font-size: 16px !important; } }