:root{
  --ink:#122A2C;
  --sand:#F7F1E2;
  --ink-text:#17262A;
  --muted:#5E7270;
  --muted-2:#8FA6A2;

  --gaya:#C98A2B;
  --water:#E1653A;
  --imago:#2E9C86;
  --heart:#E85C7A;

  --crimson-1:#54101F;
  --crimson-2:#9E1B4D;
  --pink-1:#E8527A;
  --bg-flat:#E791B2;

  --stroke: rgba(18,42,44,0.18);
  --card-h:99px;
  --card-gap:12px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg-flat);
  color:var(--ink);
  font-family:'Noto Sans KR', sans-serif;
  line-height:1.6;
}
.mono{ font-family:'JetBrains Mono', monospace; letter-spacing:.08em; }
a{ color:inherit; text-decoration:none; }

.hub-hero{
  position:relative;
  padding:56px 24px 30px;
  max-width:960px; margin:0 auto;
  text-align:center;
}
.hub-hero .eyebrow{ font-size:12px; color:rgba(18,42,44,0.65); text-transform:uppercase; margin-bottom:14px; }
.hub-hero h1{
  font-family:'Noto Serif KR', serif;
  font-weight:900;
  font-size:clamp(24px, 4.6vw, 40px);
  margin:0 0 14px;
  line-height:1.35;
}
.hub-hero h1 span{ color:#7A1030; }
.hub-hero p{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  color:rgba(18,42,44,0.75); max-width:560px; margin:0 auto; font-size:14px;
}
.hub-hero .dday{
  font-family:'JetBrains Mono', monospace; font-size:11.5px; font-weight:700;
  background:rgba(18,42,44,0.1); padding:3px 10px; border-radius:999px;
  color:#7A1030;
}

.section-label{
  max-width:1000px; margin:0 auto 10px; padding:0 24px;
  font-size:11px; color:rgba(18,42,44,0.55); text-transform:uppercase;
}

.grid-scroll{
  max-width:1000px; margin:0 auto 18px; padding:0 24px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-auto-rows:var(--card-h);
  gap:var(--card-gap);
  max-height:calc(var(--card-h) * 2 + var(--card-gap) + 6px);
  overflow-y:auto;
  padding-right:4px;
}

.trip-card{
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff;
  border-radius:12px;
  padding:8px 9px;
  position:relative;
  box-shadow:0 5px 12px rgba(0,0,0,0.28);
  transition:.16s transform, .16s box-shadow;
  overflow:hidden;
  background-color:var(--tc);
}
.trip-card::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.42) 100%);
  pointer-events:none;
}
.trip-card:hover{ transform:translateY(-3px); box-shadow:0 9px 20px rgba(0,0,0,0.34); }
.trip-card .toprow{ display:flex; align-items:center; gap:5px; margin-bottom:2px; position:relative; }
.trip-card .emoji{ font-size:17px; position:relative; }
.trip-card .localtime{
  font-family:'JetBrains Mono', monospace; font-size:8px; font-weight:600;
  background:rgba(0,0,0,0.28); padding:2px 5px; border-radius:999px; opacity:.95;
}
.trip-card .country{ font-size:9px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; opacity:.85; position:relative; }
.trip-card h2{ font-family:'Noto Serif KR', serif; font-size:14px; margin:1px 0 3px; line-height:1.2; position:relative; }
.trip-card .dates{
  font-family:'JetBrains Mono', monospace; font-size:9px; font-weight:600;
  opacity:.9; position:relative;
}
.trip-card .arrow{
  position:absolute; right:6px; top:6px;
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.22); font-size:10px;
}

.feature-row{
  max-width:1000px; margin:0 auto 60px; padding:0 24px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--card-gap);
}
.feature-slot{
  height:var(--card-h);
  border-radius:12px;
  border:1.5px dashed rgba(18,42,44,0.25);
  background:rgba(18,42,44,0.05);
}
.feature-slot.filled{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  text-align:center;
  color:var(--ink);
  border-style:solid;
  border-color:rgba(18,42,44,0.4);
  background:rgba(18,42,44,0.08);
  transition:.16s transform, .16s background;
}
.feature-slot.filled:hover{ transform:translateY(-3px); background:rgba(18,42,44,0.14); }
.feature-slot.filled .ficon{ font-size:20px; }
.feature-slot.filled .flabel{ font-size:9.5px; font-weight:700; line-height:1.3; }

footer{ max-width:920px; margin:20px auto 70px; padding:0 24px; text-align:center; color:rgba(18,42,44,0.6); font-size:12.5px; }
footer .line{ width:60px; height:1px; background:var(--stroke); margin:0 auto 22px; }