* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue: #1a5fd0;
  --blue-d: #103e8c;
  --ink: #1c2533;
  --muted: #5b6677;
  --line: #d8e0ec;
  --bg-grad: linear-gradient(135deg, #eaf2ff 0%, #f6f9ff 45%, #eef4ff 100%);
}
html, body { height: 100%; }
body {
  font-family: "LINE Seed JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: var(--bg-grad);
  background-attachment: fixed;
  display: flex; flex-direction: column;
}

/* ---- 起動ローディング ---- */
.app-loading {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-grad); background-attachment: fixed;
  transition: opacity .4s ease;
}
.app-loading.hide { opacity: 0; pointer-events: none; }
.loader-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(26,95,208,.2); border-top-color: var(--blue);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-title { font-size: 16px; font-weight: 700; color: var(--blue-d); }
.loader-sub { font-size: 12.5px; color: var(--muted); }

/* ---- ヘッダ ---- */
.app-header {
  padding: 18px 24px 12px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand h1 { font-size: 20px; color: var(--blue-d); letter-spacing: .02em; }
.brand .sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.controls { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
#search {
  width: 100%; max-width: 560px;
  padding: 10px 14px; font-size: 15px; font-family: inherit;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
}
#search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,95,208,.15); }
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 5px 12px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; color: var(--muted);
  transition: .12s;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.stat { margin-top: 9px; font-size: 12px; color: var(--muted); }

/* ---- リスト ---- */
.list-wrap { flex: 1; overflow-y: auto; padding: 16px 24px 48px; }
.list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; max-width: 1180px; margin: 0 auto; }
@media (max-width: 720px) { .list { grid-template-columns: 1fr; } .list-wrap { padding: 14px 16px 40px; } }
.row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; cursor: pointer; transition: .12s;
}
.row:hover { border-color: var(--blue); box-shadow: 0 4px 14px rgba(26,95,208,.12); transform: translateY(-1px); }
.row .booth-badge { flex: none; }
.row .info { min-width: 0; }
.row .nm { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.row .nolocation { color: #b06a00; }

.booth-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; height: 30px; padding: 0 8px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-d) 100%);
  color: #fff; font-weight: 700; font-size: 13.5px; border-radius: 8px; letter-spacing: .03em;
}
.booth-badge.approx { background: linear-gradient(180deg, #e08a1e, #b86a00); }
.booth-badge.none { background: #9aa6b6; }

.empty { text-align: center; color: var(--muted); padding: 60px 0; }

/* ---- モーダル ---- */
.modal { position: fixed; inset: 0; background: rgba(16,28,52,.55); backdrop-filter: blur(3px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 2.5vh 2vw; }
.modal[hidden] { display: none; }
.modal-box { width: min(1200px, 96vw); height: 95vh; background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fafcff; }
.modal-title { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 16px; font-weight: 700; }
.modal-title #mName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hall-tag { font-size: 11.5px; font-weight: 600; color: var(--blue-d); background: #e6efff; padding: 3px 9px; border-radius: 999px; flex: none; }
.modal-tools { display: flex; gap: 6px; flex: none; }
.modal-tools button { font: inherit; font-size: 13px; cursor: pointer; border: 1.5px solid var(--line); background: #fff; color: var(--ink); border-radius: 8px; padding: 6px 11px; transition: .12s; }
.modal-tools button:hover { border-color: var(--blue); color: var(--blue); }
.modal-tools .close { font-size: 18px; line-height: 1; padding: 4px 11px; }

.notice { padding: 9px 16px; font-size: 12.5px; background: #fff4e0; color: #8a5300; border-bottom: 1px solid #f0dcb0; }
.notice[hidden] { display: none; }

.pdf-viewport { position: relative; flex: 1; overflow: auto; background: #e9eef6; cursor: grab; touch-action: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pdf-viewport.grabbing { cursor: grabbing; }
.pdf-stage { position: relative; }
.pdf-stage img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.labels { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.blabel {
  position: absolute; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 0 1px; box-sizing: border-box;
  font-size: 8.5px; line-height: 1.04; color: #15233a; text-align: center;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
}
.blabel span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blabel.approx { color: #7a4a00; }
.blabel.sel { color: #c1001c; font-weight: 800; font-size: 11px; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; z-index: 7; }

.highlight {
  position: absolute; border: 3px solid #ff3b30; border-radius: 4px;
  background: rgba(255,59,48,.16); box-shadow: 0 0 0 4000px rgba(16,28,52,.32);
  pointer-events: none; z-index: 5;
  animation: pulse 1.1s ease-out 3;
}
.highlight[hidden] { display: none; }
.hl-label {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis;
  background: #ff3b30; color: #fff; font-size: 13px; font-weight: 700;
  padding: 4px 10px; border-radius: 7px; box-shadow: 0 3px 10px rgba(0,0,0,.35);
  z-index: 6; pointer-events: none;
}
.hl-label::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #ff3b30;
}
.hl-label.below { bottom: auto; top: calc(100% + 8px); }
.hl-label.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #ff3b30; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 4000px rgba(16,28,52,.32), 0 0 0 0 rgba(255,59,48,.6); }
  70% { box-shadow: 0 0 0 4000px rgba(16,28,52,.32), 0 0 0 18px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 4000px rgba(16,28,52,.32), 0 0 0 0 rgba(255,59,48,0); }
}
.loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; background: #e9eef6; }
.loading[hidden] { display: none; }