:root {
  --ink: #10252e; --muted: #5d6f77; --bg: #f6f3ec; --card: #ffffff;
  --line: #dcd6c8; --sea: #0d5c63; --sea-dark: #093f45;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e8efef; --muted: #9fb0b6; --bg: #0c1a1f; --card: #13262c; --line: #264048; --sea: #5fc1c8; --sea-dark: #8fd8dd; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); }
a { color: var(--sea-dark); }
header { padding: 56px 24px 32px; max-width: 1200px; margin: 0 auto; }
h1 { font: 400 clamp(2rem, 5vw, 3.2rem)/1.1 var(--serif); margin: 0 0 12px; }
h2 { font: 400 1.5rem/1.2 var(--serif); margin: 32px 0 12px; }
header p { margin: 0; color: var(--muted); max-width: 60ch; }
main { max-width: 1200px; margin: 0 auto; padding: 0 24px 48px; }
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.card:hover .addr { text-decoration: underline; }
.card:focus-visible, .btn:focus-visible, .thumbs button:focus-visible, .pager a:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.photo { aspect-ratio: 4/3; background: var(--line); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.body { padding: 16px 18px 18px; }
.price { font: 400 1.5rem/1.2 var(--serif); margin: 0 0 4px; }
.stats { color: var(--muted); font-size: .95rem; margin: 0 0 8px; }
.addr { margin: 0 0 10px; }
.attr { color: var(--muted); font-size: .8rem; margin: 0; }
.dbg { margin-top: 8px; font-family: monospace; }
.pager { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 40px 0 8px; }
.pager a { border: 1px solid var(--sea); padding: 8px 16px; border-radius: 4px; text-decoration: none; }
.notice { background: var(--card); border: 1px solid var(--line); padding: 20px; border-radius: 6px; }
footer { max-width: 1200px; margin: 0 auto; padding: 24px; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); }
pre { white-space: pre-wrap; word-break: break-word; }

/* Detail page */
.detail { max-width: 1000px; padding-top: 32px; }
.back { margin: 0 0 16px; }
.gallery > img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; border-radius: 6px; background: var(--line); }
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; }
.thumbs button { border: 0; padding: 0; background: none; cursor: pointer; flex: 0 0 auto; border-radius: 4px; }
.thumbs img { width: 110px; height: 76px; object-fit: cover; display: block; border-radius: 4px; }
.summary h1 { margin-top: 24px; }
.btn { display: inline-block; border: 1px solid var(--sea); padding: 8px 16px; border-radius: 4px; text-decoration: none; }
.remarks { max-width: 70ch; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 32px; margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; }