:root {
  font-family: "Yu Gothic UI", Meiryo, sans-serif;
  color: #18222b; background: #f4f6f7; font-size: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
input, select, textarea, button { font: inherit; border: 1px solid #aeb9c2; border-radius: 2px; background: white; padding: 3px 5px; }
input[readonly], textarea[readonly], input:disabled, select:disabled, textarea:disabled { background: #e9edf0; color: #263740; opacity: 1; }
button { cursor: pointer; background: #edf9fd; border-color: #5f9ebd; }
button:hover:not(:disabled) { background: #d1edf7; }
button:disabled { color: #87919a; background: #f0f0f0; cursor: not-allowed; }
header { padding: 3px 8px; background: #004ea2; color: #fff; display: flex; flex: none; gap: 8px; align-items: center; flex-wrap: wrap; }
h1 { font-size: 18px; margin: 0; }
.brand { font-weight: 700; font-size: 18px; }
.badge { margin-left: auto; font-size: 12px; }
main { padding: 4px 7px; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.notice { margin: 4px 0; padding: 4px 6px; background: #fff4d4; border-left: 3px solid #bd941c; flex: none; }
.card { background: #fff; border: 1px solid #b4c5cf; padding: 6px; margin-top: 4px; }
h2 { font-size: 16px; margin: 0 0 6px; }
#login-panel { width: min(100%, 520px); margin: 12px auto; }
form { display: grid; gap: 6px; }
.customer { display: flex; align-items: center; justify-content: space-between; margin: 4px 0; }
.customer h2 { margin: 0; }
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.menu button { min-height: 32px; text-align: left; }
[role=alert] { color: #b00000; }
[role=alert]:empty { display: none; }
footer { padding: 3px 8px; flex: none; color: #52616a; border-top: 1px solid #b4c5cf; font-size: 12px; }
[hidden] { display: none !important; }
.table-scroll { border: 1px solid #859ba8; overflow-y: auto; overflow-x: auto; flex: 1; min-height: 0; background: #fff; }
table { border-collapse: collapse; width: 100%; table-layout: auto; }
tbody { font-size: 12px; }
th, td { border: 1px solid #bbc7ce; padding: 2px 4px; vertical-align: middle; }
th { height: 28px; background: #dceaf1; font-weight: 400; white-space: nowrap; font-size: 12px; position: sticky; top: 0; z-index: 2; }
tbody tr:nth-child(even) { background: #fafafa; }
tbody tr:hover, tbody tr:hover > td { background: #e8f5fb; color: #18222b; }
@media(max-width:700px) { .menu { grid-template-columns: 1fr; } header h1 { white-space: normal; } }

.header-account { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.header-account button { color: #004ea2; background: #edf9fd; border-color: white; font-weight: 700; min-height: 32px; padding: 5px 10px; }
.header-account button:hover:not(:disabled) { background: #d1edf7; }