* { box-sizing: border-box; }
body { margin: 0; background: #f7f7f7; color: #222; font: 14px/1.55 "Malgun Gothic", sans-serif; }
header { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: #fff; border-bottom: 1px solid #ddd; }
a { color: #245f9e; }
.title { color: #222; font-weight: bold; text-decoration: none; }
main { max-width: 1350px; padding: 20px; margin: auto; min-width: 0; }
h1 { font-size: 22px; margin: 0 0 10px; }
.filename { overflow-wrap: anywhere; margin-top: 12px; }
.muted, small { color: #666; }
small { display: block; font-size: 12px; }
.button, button { display: inline-block; border: 0; background: #2b6cb0; color: #fff; padding: 8px 12px; text-decoration: none; font: inherit; cursor: pointer; }
.search, .toolbar { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 18px 0; }
.toolbar { align-items: center; }
label { display: grid; gap: 4px; }
input, select { padding: 8px; border: 1px solid #aaa; background: white; font: inherit; max-width: 100%; }
.table-wrap { overflow: auto; border: 1px solid #ddd; background: #fff; }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 10px; border-bottom: 1px solid #eee; text-align: left; }
th { background: #eee; }
.file-list td:first-child { overflow-wrap: anywhere; }
.file-list td:not(:first-child) { white-space: nowrap; }
.data-table { max-height: 70vh; }
.data-table td, .data-table th { white-space: nowrap; }
.data-table th { position: sticky; top: 0; }
.image-wrap { background: #fff; border: 1px solid #ddd; padding: 12px; }
.image-wrap img { display: block; max-width: 100%; height: auto; margin: auto; }
.code-wrap { max-height: 75vh; overflow: auto; background: #fff; border: 1px solid #ddd; }
.code { margin: 0; padding: 12px 12px 12px 4.5em; }
.code li { padding-left: 12px; white-space: pre; font: 13px/1.65 Consolas, monospace; color: #666; }
.code code { color: #222; }
.map-preview { width: 100%; height: 72vh; min-height: 420px; border: 1px solid #bbb; background: #fff; }
.checksum { margin-top: 20px; overflow-wrap: anywhere; color: #666; }
@media (max-width: 640px) {
  header { padding: 10px; gap: 10px; }
  main { padding: 14px 10px; }
  h1 { font-size: 19px; }
  .button, button, input, select { font-size: 16px; min-height: 44px; }
  .search label { flex: 1 1 100%; min-width: 0; }
  td, th { padding: 8px; }
  .file-list td:last-child, .file-list th:last-child { display: none; }
  .file-list td:nth-child(2) { font-size: 12px; }
  .map-preview { height: 65vh; min-height: 350px; }
}