:root { font-family: Inter, system-ui, sans-serif; color: #17202a; background: #f4f6f7; }
* { box-sizing: border-box; }
body { margin: 0; }
header { min-height: 82px; padding: 14px 22px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #dfe6e9; }
h1,h2,h3,p { margin-top:0; }
header h1 { margin-bottom:4px; font-size:1.45rem; }
header p { margin-bottom:0; color:#607080; }
.legend { display:flex; gap:18px; font-size:.92rem; }
.dot { width:12px; height:12px; display:inline-block; border-radius:50%; margin-right:6px; }
.dot.camp { background:#1565c0; }
.dot.interest { background:#d84315; }
main:not(.detail-card) { display:grid; grid-template-columns:320px 1fr; height:calc(100vh - 82px); }
aside { overflow:auto; padding:18px; background:#fff; border-right:1px solid #dfe6e9; }
#map { height:100%; }
.point-item { display:block; padding:12px; margin-bottom:10px; border:1px solid #dfe6e9; border-radius:10px; text-decoration:none; color:inherit; background:#fff; }
.point-item:hover { border-color:#95a5a6; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.point-item strong { display:block; margin-bottom:5px; }
.badge { display:inline-block; padding:3px 8px; border-radius:999px; font-size:.76rem; color:#fff; }
.badge.camp { background:#1565c0; }
.badge.interest { background:#d84315; }
.price { margin-top:7px; font-weight:600; }
.error { padding:10px; margin-bottom:10px; border-radius:8px; background:#fff3cd; color:#664d03; }
.detail-page { padding:28px; }
.detail-card { max-width:980px; margin:auto; padding:26px; background:#fff; border-radius:16px; box-shadow:0 8px 28px rgba(0,0,0,.08); }
.meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:20px 0; }
.meta > div { padding:12px; border-radius:10px; background:#f5f7f8; }
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:#eee; }
table { width:100%; border-collapse:collapse; margin:14px 0; }
th,td { padding:9px; text-align:left; border-bottom:1px solid #e5e7e9; }
.total { font-size:1.25rem; font-weight:700; }
@media (max-width:760px) { main:not(.detail-card){grid-template-columns:1fr;grid-template-rows:230px 1fr} aside{border-right:0;border-bottom:1px solid #ddd}.legend{display:none}.detail-page{padding:12px} }
.interest-subtype { display:inline-block; margin-left:7px; font-size:.82rem; color:#5d6d7e; }
.interest-map-icon { background:transparent; border:0; }
.interest-map-icon span { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:2px solid #d84315; border-radius:50%; background:#fff; font-size:21px; line-height:1; box-shadow:0 2px 8px rgba(0,0,0,.24); }
.detail-interest-icon { margin-right:7px; font-size:1.25rem; vertical-align:middle; }

.gallery-help { color:#607080; margin-bottom:14px; }
.gallery-button { display:block; width:100%; padding:0; border:0; border-radius:10px; background:#eee; cursor:zoom-in; overflow:hidden; }
.gallery-button:focus-visible { outline:3px solid #1565c0; outline-offset:3px; }
.gallery-button img { display:block; transition:transform .2s ease; }
.gallery-button:hover img { transform:scale(1.025); }
body.lightbox-open { overflow:hidden; }
.lightbox[hidden] { display:none; }
.lightbox { position:fixed; inset:0; z-index:9999; display:grid; grid-template-columns:minmax(52px,96px) minmax(0,1fr) minmax(52px,96px); align-items:center; background:rgba(0,0,0,.94); }
.lightbox-figure { min-width:0; max-width:calc(100vw - 190px); max-height:100vh; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lightbox-image { display:block; max-width:100%; max-height:calc(100vh - 72px); object-fit:contain; user-select:none; }
.lightbox-counter { margin-top:12px; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; font-size:.9rem; }
.lightbox-close,.lightbox-nav { border:0; color:#fff; background:rgba(255,255,255,.12); cursor:pointer; }
.lightbox-close:hover,.lightbox-nav:hover { background:rgba(255,255,255,.24); }
.lightbox-close:focus-visible,.lightbox-nav:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.lightbox-close { position:absolute; top:16px; right:18px; width:48px; height:48px; border-radius:50%; font-size:2rem; line-height:1; }
.lightbox-nav { width:54px; height:72px; justify-self:center; border-radius:12px; font-size:3rem; line-height:1; }
@media (max-width:760px) {
  .lightbox { grid-template-columns:48px minmax(0,1fr) 48px; }
  .lightbox-figure { max-width:calc(100vw - 96px); }
  .lightbox-nav { width:42px; height:60px; font-size:2.5rem; }
  .lightbox-close { top:10px; right:10px; width:42px; height:42px; }
}

.back-to-map { display:inline-flex; align-items:center; gap:6px; margin-bottom:18px; padding:9px 13px; border:1px solid #cfd8dc; border-radius:9px; color:#17202a; background:#f8fafb; text-decoration:none; font-weight:600; }
.back-to-map:hover { border-color:#95a5a6; background:#eef2f3; }
.back-to-map:focus-visible { outline:3px solid #1565c0; outline-offset:3px; }