.page-hero::before{content: 'SHUTTLE';}
.shuttle-page{
  --sh-navy:#1D2A50;      /* 본문 잉크 */
  --sh-blue:#2E5BFF;      /* 포인트(신뢰) */
  --sh-sky:#EEF3FF;       /* 옅은 배경 */
  --sh-mut:#69718A;
  --sh-line:#E3E7F0;
  --sh-a:#E53935; --sh-b:#F57C00; --sh-c:#F4B400;   /* 귀가행 노선색(원본 유지) */
  background:#FAFBFE; color:var(--sh-navy); padding:70px 0 110px;
}
.sh-container{ max-width:1040px; margin:0 auto; padding:0 20px; }
.sh-section{ margin-top:96px; }
.sh-section:first-of-type{ margin-top:56px; }

.sh-head{ margin-bottom:36px; }
.sh-eyebrow{ display:inline-block; font-size:12px; letter-spacing:.24em; font-weight:800; color:var(--sh-blue); margin-bottom:12px; }
.sh-head h2{ font-size:clamp(23px,3.4vw,32px); font-weight:800; margin:0 0 10px; }
.sh-head p{ font-size:15px; color:var(--sh-mut); margin:0; line-height:1.7; }
.sh-head p b{ color:var(--sh-blue); }

/* ---------- 운행일 배너 ---------- */
.sh-notice-days{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--sh-sky); border:1px solid #D8E2FF; border-radius:18px; padding:20px 26px; }
.sh-notice-days strong{ font-size:14px; font-weight:800; color:var(--sh-blue);
  border:1.5px solid var(--sh-blue); border-radius:999px; padding:5px 14px; }
.sh-days{ font-size:clamp(15px,2vw,18px); font-weight:800; }
.sh-notice-days em{ font-style:normal; font-size:13px; color:#C0392B; font-weight:700; margin-left:auto; }

/* ---------- 노선 스트립 (시그니처) ---------- */
.sh-route{ margin-bottom:34px; }
.sh-route-track{ display:flex; align-items:center; gap:18px; position:relative;
  background:#fff; border:1px solid var(--sh-line); border-radius:18px; padding:26px 28px; }
.sh-slot{ display:block; height:1.5em; overflow:hidden;
  font-size:clamp(16px,2.2vw,19px); min-width:7em; }
.sh-slot-reel{ display:block; }
.sh-slot-reel b{ display:block; height:1.5em; line-height:1.5;
  font-weight:800; text-align:center; white-space:nowrap; }
.sh-origin i{ font-style:normal; font-size:11px; letter-spacing:.2em; color:var(--sh-mut); font-weight:700; }
.sh-route-line{ position:relative; flex:1; height:4px; border-radius:4px;
  background:repeating-linear-gradient(90deg, var(--sh-blue) 0 26px, transparent 26px 40px); opacity:.35; }
.sh-bus{ position:absolute; top:6px; left:130px; width:52px; color:var(--sh-blue);
  animation:sh-drive 8.5s cubic-bezier(.45,.05,.55,.95) infinite; }
.sh-bus svg{ width:100%; height:auto; display:block; }
@keyframes sh-drive{
  0%  { left:120px; opacity:0; }
  10% { opacity:1; }
  86% { opacity:1; }
  100%{ left:calc(100% - 210px); opacity:0; }
}
.sh-dest{ flex:none; font-size:clamp(14px,2vw,17px); font-weight:800; color:var(--sh-navy); }
.sh-route-caption{ margin:14px 4px 0; font-size:14px; color:var(--sh-mut); }
.sh-route-caption b{ color:var(--sh-blue); }

/* ---------- 정류장 카드 ---------- */
.sh-cards{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.sh-card{ background:#fff; border:1px solid var(--sh-line); border-radius:16px; padding:22px 16px; text-align:center;
  opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease, box-shadow .25s; }
.sh-card.in{ opacity:1; transform:none; }
.sh-card:hover{ box-shadow:0 10px 24px rgba(29,42,80,.08); }
.sh-card-station{ display:block; font-size:16px; font-weight:800; }
.sh-card-exit{ display:inline-block; margin:8px 0 10px; font-size:12px; font-weight:800; color:var(--sh-blue);
  background:var(--sh-sky); border-radius:999px; padding:4px 12px; }
.sh-card p{ font-size:13px; color:var(--sh-mut); margin:0; }

/* ---------- 표 공통 ---------- */
.sh-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:#fff; border:1px solid var(--sh-line); border-radius:18px; }
.sh-table{ width:100%; min-width:520px; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.sh-table th, .sh-table td{ padding:16px 18px; text-align:center; font-size:15px; border-bottom:1px solid var(--sh-line); }
.sh-table thead th{ background:var(--sh-sky); font-weight:800; color:var(--sh-navy); font-size:14px; }
.sh-table tbody th{ font-weight:800; background:#FCFDFF; }
.sh-table tbody tr:last-child th, .sh-table tbody tr:last-child td{ border-bottom:none; }
.sh-table td{ font-weight:600; color:#2A3555; }
.sh-table.refund{ min-width:0; }
.sh-table .no-refund{ color:#C0392B; }

/* ---------- 귀가행 ---------- */
.sh-map{ background:#fff; border:1px solid var(--sh-line); border-radius:18px; overflow:hidden; margin-bottom:26px; padding: 3%;}
.sh-map img{ height:auto; display:block; margin: 0 auto;}
.sh-lines{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.sh-line{ background:#fff; border:1px solid var(--sh-line); border-top:4px solid; border-radius:16px; padding:20px 22px;
  opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease; }
.sh-line.in{ opacity:1; transform:none; }
.sh-line.a{ border-top-color:var(--sh-a); }
.sh-line.b{ border-top-color:var(--sh-b); }
.sh-line.c{ border-top-color:var(--sh-c); }
.sh-line-head{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; margin-bottom:12px; }
.sh-line .dot{ width:10px; height:10px; border-radius:50%; }
.sh-line.a .dot{ background:var(--sh-a); }
.sh-line.b .dot{ background:var(--sh-b); }
.sh-line.c .dot{ background:var(--sh-c); }
.sh-line ul{ list-style:none; margin:0; padding:0; }
.sh-line li{ font-size:14px; padding:7px 0; border-bottom:1px dashed var(--sh-line); }
.sh-line li:last-child{ border-bottom:none; }
.sh-far{ font-style:normal; font-size:11px; font-weight:800; color:#C0392B;
  border:1px solid rgba(192,57,43,.4); border-radius:6px; padding:2px 7px; margin-left:6px; vertical-align:1px; }
.sh-note{ margin:18px 2px 0; font-size:13px; color:var(--sh-mut); line-height:1.8; }

/* ---------- 요금 ---------- */
.sh-fares{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.sh-fare{ background:#fff; border:1px solid var(--sh-line); border-radius:16px; padding:26px 22px; text-align:center;
  opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease; }
.sh-fare.in{ opacity:1; transform:none; }
.sh-fare-label{ display:block; font-size:13px; font-weight:800; color:var(--sh-mut); margin-bottom:10px; }
.sh-fare strong{ font-size:clamp(26px,3.6vw,34px); font-weight:900; font-variant-numeric:tabular-nums; }
.sh-fare strong small{ font-size:15px; font-weight:700; margin-left:2px; }
.sh-fare.far strong{ color:#C0392B; }
a.sh-cta{ display:block; max-width:420px; margin:36px auto 0; text-align:center;
  background:var(--sh-blue); color:#fff; font-size:16px; font-weight:800;
  border-radius:999px; padding:17px 20px; text-decoration:none;
  border:1.5px solid var(--sh-blue);
  filter:drop-shadow(0 8px 20px rgba(46,91,255,.3)); transform:translateZ(0);
  transition:background .3s ease, color .3s ease, transform .2s ease; }
a.sh-cta:hover{
  background:#eaeffd;
  color:var(--sh-blue);
  border: 1.5px solid #bcc9f7;
  transform:translateY(-2px) translateZ(0);
}

/* ---------- 리스트 ---------- */
.sh-list{ list-style:none; margin:0; padding:0;}
.sh-list li{ position:relative; padding:12px 0 12px 24px; font-size:15px; color:#3A445F; line-height:1.75;
  opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s ease; }
.sh-list li.in{ opacity:1; transform:none; }
.sh-list li::before{ content:''; position:absolute; left:0; top:20px; width:7px; height:7px; border-radius:50%; background:var(--sh-blue); }
.sh-list.warn li::before{ background:#C0392B; }
.sh-list b{ color:var(--sh-navy); }

/* ---------- 문의 ---------- */
.sh-contact{ margin-top:44px; background:var(--sh-sky); border:1px solid #D8E2FF; border-radius:18px;
  padding:26px 30px; }
.sh-contact strong{ display:block; font-size:13px; letter-spacing:.14em; font-weight:800; color:var(--sh-blue); margin-bottom:8px; }
.sh-contact p{ font-size:16px; margin:0 0 6px; font-weight:600; }
.sh-contact a{ color:var(--sh-blue); font-weight:800; text-decoration:none; }
.sh-contact span{ font-size:13px; color:var(--sh-mut); }

/* ---------- 공통 리빌 ---------- */
.sh-reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.sh-reveal.in{ opacity:1; transform:none; }

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .sh-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sh-cards .sh-card:last-child{ grid-column:1 / -1; }
  .sh-lines{ grid-template-columns:1fr; }
  .sh-fares{ grid-template-columns:1fr; }
  .sh-notice-days em{ margin-left:0; width:100%; }
  .sh-section{ margin-top:72px; }
  .sh-stop{ font-size:11px; }
}
@media (prefers-reduced-motion:reduce){
  .sh-reveal,.sh-card,.sh-line,.sh-fare,.sh-list li{ opacity:1; transform:none; transition:none; }
  .sh-bus{ animation:none; left:40%; }
}
@media (max-width:640px){
  .sh-route-track{ padding:20px 16px; gap:12px; }
  .sh-origin b{ min-width:80px; }
  .sh-bus{ left:100px; width:40px; }
  @keyframes sh-drive{
    0%  { left:92px; opacity:0; }
    10% { opacity:1; }
    86% { opacity:1; }
    100%{ left:calc(100% - 150px); opacity:0; }
  }
}