:root { --bg: #fff8e7; --fg: #1a1a1a; --muted: #666; --link: #1f4ab8; }
html, body { height: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font: 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }
.wrap { padding: clamp(16px,4vw,48px); max-width: none; }
h1 { margin: 0 0 12px; font: 700 clamp(22px,3.5vw,32px)/1.15 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }
.controls { margin: 8px 0 16px; }
input[type="search"] { padding: 8px 10px; font: inherit; width: 100%; max-width: 420px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.status { margin: 8px 0 12px; color: var(--muted); font-size: 14px; }
.list { list-style: none; padding: 0; margin: 0; max-width: min(33vw, 640px); }
.list { margin-right: 8px; }
.list li { padding: 8px 4px; border-bottom: 1px solid #eee; cursor: default; }
.list li .t { font-weight: 600; }
.list li .a { color: var(--muted); }

.popover { position: fixed; inset: 0; pointer-events: none; z-index: 2000; }
.popover[hidden] { display: none; }
.pop-inner { position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.98); color: var(--fg); border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); padding: 10px; width: min(66vw, 1100px); display: flex; gap: 12px; pointer-events: auto; }
.pop-cover img { display: block; width: clamp(90px, 18vw, 160px); height: auto; object-fit: contain; background: #f5f5f5; }
.pop-title { font-weight: 700; margin: 2px 0 4px; }
.pop-author { color: var(--muted); margin-bottom: 8px; }
.pop-review { max-width: 56ch; white-space: pre-wrap; }
.pop-close { position: absolute; right: 6px; top: 2px; border: none; background: transparent; font-size: 20px; line-height: 1; padding: 4px; cursor: pointer; color: #666; }

.home-link { position: fixed; right: 12px; bottom: 12px; z-index: 1000; opacity: 0.4; }
.home-link img { width: 28px; height: 28px; display: block; }
.home-link:hover { opacity: 0.7; }

.hint { position: fixed; right: 12px; top: 12px; color: #666; font-size: 13px; opacity: 0.75; }

@media (max-width: 700px) {
  .pop-inner { flex-direction: column; max-width: 90vw; }
  .pop-cover img { width: clamp(120px, 40vw, 220px); }
}