/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; margin: 0; color: #1a1a1a; background: #f5f5f5; }

/* ===== Header ===== */
header {
  background: #1a1a2e;
  color: #fff;
  padding: .5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
}
header a {
  color: #7ecff7;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 .25rem;
}
header a:hover { color: #fff; }
header .right { margin-left: auto; }
header .right a { color: #f9a825; }

/* ===== Main ===== */
main {
  padding: 1rem;
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  min-height: calc(100vh - 3rem);
}

/* ===== Typography ===== */
h1 { margin-top: .5rem; font-size: 1.4rem; }
h2 { font-size: 1.1rem; border-bottom: 1px solid #e0e0e0; padding-bottom: .25rem; }
.muted { color: #666; font-size: .85rem; margin: .5rem 0; }

/* ===== Forms ===== */
label { display: block; margin: .5rem 0; font-size: .95rem; }
input, select, textarea {
  font-size: 1rem;
  padding: .5rem .6rem;
  border: 1px solid #ccc;
  border-radius: .35rem;
  width: 100%;
  max-width: 380px;
  background: #fff;
}
input:focus, select:focus { outline: 2px solid #0066cc; border-color: #0066cc; }
button {
  font-size: 1rem;
  padding: .55rem 1.2rem;
  background: #0066cc;
  color: #fff;
  border: 0;
  border-radius: .35rem;
  cursor: pointer;
  min-height: 44px;
}
button:hover { background: #0052a3; }
button[type="submit"][form*="delete"], fieldset:last-of-type button { background: #b00020; }
fieldset { border: 1px solid #ddd; border-radius: .4rem; margin: 1rem 0; padding: .75rem 1rem; }
legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }

/* ===== Search / filter row ===== */
form[method="get"] { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; align-items: center; }
form[method="get"] input, form[method="get"] select { max-width: 220px; }
form[method="get"] a { font-size: .9rem; white-space: nowrap; }

/* ===== Tables ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .5rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { background: #f0f4f8; font-weight: 600; }
th, td { border: 1px solid #e0e0e0; padding: .45rem .6rem; text-align: left; vertical-align: middle; }
tbody tr:nth-child(even) { background: #fafafa; }
tbody tr:hover { background: #eef4ff; }

/* ===== Status badges ===== */
.badge { display: inline-block; padding: .1rem .45rem; border-radius: .7rem; font-size: .8rem; color: #fff; white-space: nowrap; font-weight: 500; }
.badge[data-status="사용중"]   { background: #1a7f37; }
.badge[data-status="보관"]     { background: #6c757d; }
.badge[data-status="수리중"]   { background: #b8860b; }
.badge[data-status="폐기예정"] { background: #c0562b; }
.badge[data-status="폐기"]     { background: #9b2226; }

/* ===== Utilities ===== */
.error { color: #c00; font-weight: 500; }
.actions a { margin-right: .5rem; }
a { color: #0066cc; }

/* ===== Mobile ===== */
@media (max-width: 600px) {
  header { padding: .4rem .75rem; gap: .2rem .5rem; font-size: .95rem; }
  main { padding: .75rem; }
  h1 { font-size: 1.2rem; }
  table { font-size: .8rem; }
  th, td { padding: .35rem .4rem; }
  form[method="get"] input, form[method="get"] select { max-width: 100%; }
  input, select, textarea { max-width: 100%; }
}