:root{
  --bg:#f5f7fa; --card:#ffffff; --ink:#1f2933; --sub:#66727f;
  --accent:#ff8c42; --accent2:#2e8bc0; --line:#e7ebf0;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px; margin:0 auto; padding:0 16px 60px;}

/* Hero */
header{
  background:linear-gradient(135deg,#ff8c42 0%,#ffb56b 50%,#2e8bc0 100%);
  color:#fff; padding:56px 20px 40px; text-align:center;
  position:relative; overflow:hidden;
}
header::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 45%),
             radial-gradient(circle at 85% 75%, rgba(255,255,255,.14), transparent 40%);
  pointer-events:none;
}
header .emoji{font-size:44px; position:relative;}
header h1{font-size:32px; margin:10px 0 6px; letter-spacing:-.5px; position:relative;}
header p{opacity:.95; font-size:14.5px; position:relative;}
header .count-pill{
  display:inline-block; margin-top:16px; padding:7px 18px;
  background:rgba(255,255,255,.22); border-radius:30px; font-size:13px;
  font-weight:700; backdrop-filter:blur(4px); position:relative;
}

section{margin-top:36px;}
.sec-head{display:flex; align-items:center; gap:10px; margin-bottom:16px; margin-top:34px;}
.sec-badge{
  background:var(--accent); color:#fff; font-weight:700; font-size:12px;
  padding:4px 11px; border-radius:8px; letter-spacing:.5px;
}
.sec-head h2{font-size:20px;}

/* Filter tabs */
.filter-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.filter-tabs .tab{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:8px 16px; font-size:14px; font-weight:600; color:var(--sub);
  cursor:pointer; font-family:inherit; transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.filter-tabs .tab:hover{color:var(--accent); border-color:#ffd9bf;}
.filter-tabs .tab.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.filter-tabs .tab:focus-visible{outline:2px solid var(--accent2); outline-offset:2px;}
.tab .cnt{
  margin-left:6px; font-size:11.5px; padding:1px 7px; border-radius:10px;
  background:#f1f3f5; color:var(--sub);
}
.tab.active .cnt{background:rgba(255,255,255,.28); color:#fff;}

/* Trip grid */
.trip-grid{display:grid; gap:16px; transition:opacity .14s ease;}
.trip-grid.is-switching{opacity:0;}
[hidden]{display:none !important;}

/* Trip card */
.trip-card{
  position:relative; display:block; background:var(--card);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 2px 10px rgba(31,41,51,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration:none; color:inherit;
}
.trip-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(31,41,51,.12);
  border-color:#ffd9bf;
}
.trip-banner{
  height:8px;
  background:linear-gradient(90deg,#ff8c42 0%,#ffb56b 50%,#2e8bc0 100%);
}
.trip-body{padding:18px 20px 20px;}
.trip-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.trip-emoji{font-size:26px; line-height:1;}
.trip-status{
  flex:0 0 auto; font-size:11.5px; font-weight:700; padding:4px 11px;
  border-radius:20px; background:#fff2e8; color:var(--accent);
  white-space:nowrap;
}
.trip-status.ongoing{background:#e6fcf5; color:#0ca678;}
.trip-status.done{background:#f1f3f5; color:#868e96;}
.trip-title{font-size:18px; font-weight:700; margin:10px 0 4px; letter-spacing:-.3px;}
.trip-loc{font-size:13.5px; color:var(--sub);}
.trip-dates{
  display:inline-block; margin-top:10px; padding:5px 13px;
  background:#f1f6fb; color:var(--accent2); border-radius:20px;
  font-size:12.5px; font-weight:600;
}
.stretched-link{
  position:absolute; inset:0; z-index:1;
}

/* Placeholder card */
.trip-card.placeholder{
  border:1.5px dashed var(--line); box-shadow:none;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center; padding:34px 20px;
  color:var(--sub); cursor:default;
}
.trip-card.placeholder:hover{transform:none; box-shadow:none; border-color:var(--line);}
.trip-card.placeholder .ph-emoji{font-size:26px; margin-bottom:8px;}
.trip-card.placeholder .ph-title{font-weight:700; font-size:15px; color:var(--ink);}
.trip-card.placeholder .ph-sub{font-size:12.5px; margin-top:4px;}

footer{
  text-align:center; color:var(--sub); font-size:13px; margin-top:48px;
}
footer a{color:var(--accent2); text-decoration:none; font-weight:600;}
footer a:hover{text-decoration:underline;}

@media (prefers-reduced-motion: reduce){
  .trip-card{transition:none;}
  .trip-card:hover{transform:none;}
  .trip-grid{transition:none;}
  .trip-grid.is-switching{opacity:1;}
}