:root{
  --bg:#f7fafc; --card:#ffffff; --accent:#2b6cb0; --muted:#6b6f76;
  --radius:12px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,#f7fafc 0%, #eef2f7 100%);
  color:#222; -webkit-font-smoothing:antialiased;
}

header{
  padding:18px 20px; display:flex; align-items:center; gap:12px;
  backdrop-filter:blur(6px);
}
header h1{margin:0; font-size:1.1rem;}
main{max-width:1100px; margin:14px auto; padding:16px;}
.grid{
  display:grid; grid-template-columns: 320px 1fr; gap:18px;
}

/* left column */
.panel{
  background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:0 6px 20px rgba(30,40,60,0.08);
}
.trip-item{display:flex; gap:10px; align-items:center; padding:10px; border-radius:10px; cursor:pointer; transition:background .18s}
.trip-item:hover{background:#f1f6fb}
.trip-thumb{width:64px;height:48px;border-radius:8px;object-fit:cover}
.trip-meta{flex:1}
.trip-meta h3{margin:0;font-size:0.95rem}
.trip-meta p{margin:4px 0 0 0;color:var(--muted);font-size:0.85rem}

/* right column */
.detail{
  display:flex; flex-direction:column; gap:14px;
}
.hero{
  background:linear-gradient(90deg, rgba(43,108,176,0.06), rgba(43,108,176,0.02));
  border-radius:12px; padding:12px;
}
.desc{padding:12px;background:var(--card); border-radius:10px; box-shadow:0 4px 14px rgba(20,30,50,0.04)}
.desc h2{margin:0 0 8px 0}
.desc p{margin:0;color:var(--muted)}

/* album */
.album{display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:10px}
.thumb{
  background:linear-gradient(180deg,#fff,#f7fbff);
  border-radius:10px; overflow:hidden; position:relative; cursor:pointer;
  display:flex; align-items:center; justify-content:center; min-height:100px;
  box-shadow:0 4px 12px rgba(20,30,50,0.06);
}
.thumb img{width:100%;height:100%;object-fit:cover; display:block}

/* modal */
.lightbox{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(7,10,14,0.6); padding:20px; z-index:60;
}
.lightbox.open{display:flex}
.lightbox .card{max-width:1000px; width:100%; max-height:90vh; background:var(--card); border-radius:10px; overflow:auto; padding:12px; display:flex; gap:12px}
.lightbox .imgwrap{flex:1; display:flex; align-items:center; justify-content:center; min-width:300px}
.lightbox img{max-width:100%; max-height:76vh; object-fit:contain; border-radius:6px}
.lb-right{width:340px; display:flex; flex-direction:column; gap:8px}
.commentbox textarea{width:100%; min-height:120px; resize:vertical; padding:8px; border-radius:8px; border:1px solid #e5e7eb; font-family:inherit}
.meta{font-size:0.9rem;color:var(--muted)}
.btn{display:inline-block;padding:8px 10px;border-radius:8px;background:var(--accent); color:white; text-decoration:none; border:none; cursor:pointer}
.btn.ghost{background:transparent;color:var(--accent); border:1px solid rgba(43,108,176,0.12)}
.controls{display:flex; gap:8px; align-items:center}

/* map */
#map{height:320px; border-radius:10px; overflow:hidden}

/* responsive */
@media (max-width:920px){
  .grid{grid-template-columns:1fr; }
  .lb-right{display:none}
  .lightbox .card{flex-direction:column}
}

footer{text-align:center; color:var(--muted); padding:18px 0; font-size:0.9rem}