/* 벨 — 달리는 버스 안에서 흔들리며 보는 화면.
   그래서 작은 글씨와 얇은 획을 피하고, 숫자 하나만 크게 남긴다. */

:root {
  --bg: #000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --line: #38383a;
  --text: #fff;
  --text-2: rgba(235, 235, 245, 0.6);
  --text-3: rgba(235, 235, 245, 0.3);
  --go: #30d158;
  --warn: #ff9f0a;
  --stop: #ff453a;
  --blue: #0a84ff;
  --r: 14px;
  --pad: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard Variable", Pretendard,
               "Apple SD Gothic Neo", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior: none;
}

.screen { padding: var(--pad); padding-bottom: 40px; min-height: 100dvh; }
[hidden] { display: none !important; }

.banner {
  background: var(--warn); color: #000; font-size: 13px; font-weight: 500;
  padding: 8px var(--pad); text-align: center;
}
.banner code { background: rgba(0,0,0,.15); padding: 1px 5px; border-radius: 4px; }

/* ── 헤더 ── */
.head { display: flex; align-items: center; gap: 12px; margin: 8px 0 24px; }
.head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; flex: 1; }
.back, .icon-btn {
  background: none; border: 0; color: var(--blue); font-size: 30px;
  line-height: 1; cursor: pointer; padding: 4px 8px; margin-left: -8px;
}
.icon-btn { font-size: 22px; color: var(--text-2); margin: 0 -8px 0 0; }

.sub { color: var(--text-2); font-size: 15px; margin-bottom: 16px; }
.foot-note { color: var(--text-3); font-size: 13px; margin-top: 24px; line-height: 1.5; }

/* ── 리스트 ── */
.list { display: flex; flex-direction: column; gap: 10px; }

.card {
  background: var(--surface); border: 0; border-radius: var(--r);
  padding: 16px 18px; text-align: left; width: 100%;
  color: var(--text); font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  transition: background .15s;
}
.card:active { background: var(--surface-2); }
.card-main { flex: 1; min-width: 0; }
.card-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.card-sub { color: var(--text-2); font-size: 14px; margin-top: 2px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-badge {
  font-size: 15px; font-weight: 700; padding: 5px 11px; border-radius: 9px;
  background: var(--surface-2); font-variant-numeric: tabular-nums;
}
.card-badge.go { background: rgba(48,209,88,.16); color: var(--go); }
.card-badge.warn { background: rgba(255,159,10,.16); color: var(--warn); }
.card.dead { opacity: .38; }

.add-btn, .ghost-btn {
  margin-top: 14px; width: 100%; padding: 15px; border-radius: var(--r);
  background: none; border: 1px dashed var(--line); color: var(--text-2);
  font: inherit; font-size: 16px; cursor: pointer;
}
.ghost-btn { border-style: solid; margin-top: 20px; }

/* ── 입력 ── */
.field { margin-bottom: 12px; }
.field input {
  width: 100%; padding: 15px 16px; border-radius: var(--r);
  background: var(--surface); border: 0; color: var(--text);
  font: inherit; font-size: 17px;
}
.field input::placeholder { color: var(--text-3); }
.field input:focus { outline: 2px solid var(--blue); outline-offset: -2px; }

.row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border-radius: var(--r); padding: 16px 18px; margin-bottom: 10px;
}
.row em { display: block; font-style: normal; color: var(--text-2); font-size: 13px; margin-top: 2px; }
.row select {
  background: var(--surface-2); color: var(--text); border: 0;
  border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 16px;
}
.row input[type="checkbox"] {
  appearance: none; width: 51px; height: 31px; border-radius: 16px;
  background: var(--surface-2); position: relative; cursor: pointer; transition: background .2s;
  flex-shrink: 0;
}
.row input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 50%; background: #fff; transition: transform .2s;
}
.row input[type="checkbox"]:checked { background: var(--go); }
.row input[type="checkbox"]:checked::after { transform: translateX(20px); }

/* ── 빈 상태 ── */
.empty { text-align: center; padding: 48px 20px; }
.empty-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.empty-body { color: var(--text-2); font-size: 15px; margin-bottom: 20px; }
.link-out { color: var(--blue); text-decoration: none; font-size: 16px; }

/* ── 운행 화면 ── */
.ride { display: flex; flex-direction: column; }
.ride-route { flex: 1; display: flex; align-items: baseline; gap: 10px; }
#ride-routeno { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.dim { color: var(--text-2); font-size: 14px; font-variant-numeric: tabular-nums; }

.alert {
  border-radius: var(--r); padding: 18px; margin-bottom: 20px;
  font-size: 17px; font-weight: 600; line-height: 1.4;
}
.alert.stop { background: var(--stop); color: #fff; }
.alert.warn { background: var(--warn); color: #000; }
.alert.go   { background: rgba(48,209,88,.16); color: var(--go); }
.alert small { display: block; font-weight: 400; font-size: 14px; opacity: .85; margin-top: 4px; }

.counter { text-align: center; padding: 24px 0 32px; }
.big {
  font-size: clamp(88px, 34vw, 132px); font-weight: 700; line-height: .95;
  letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
}
.big-unit { font-size: 18px; color: var(--text-2); margin-top: 6px; }
.dest { font-size: 20px; font-weight: 600; margin-top: 14px; letter-spacing: -0.01em; }

/* 세로 타임라인 — 버스는 정류장이 촘촘해 스크롤이 자연스럽다 */
.timeline { list-style: none; flex: 1; position: relative; padding-left: 4px; }
.timeline li {
  position: relative; padding: 11px 0 11px 30px;
  color: var(--text-2); font-size: 16px;   /* 아직 지나지 않은 정류장 */
}
.timeline li::before {
  content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--line);
}
.timeline li::after {
  content: ''; position: absolute; left: 8px; top: 50%; bottom: -11px; width: 1px; background: var(--line);
}
.timeline li:last-child::after { display: none; }
.timeline li.past { color: var(--text-3); opacity: .5; }  /* 지나온 곳은 더 물러난다 */
.timeline li.here {
  color: var(--text); font-weight: 700; font-size: 19px;
}
.timeline li.here::before {
  background: var(--go); width: 13px; height: 13px; left: 2px;
  box-shadow: 0 0 0 5px rgba(48,209,88,.2);
}
.timeline li.target { color: var(--text); font-weight: 600; }
.timeline li.target::before { background: var(--stop); }

.ride-foot {
  display: flex; align-items: center; gap: 14px;
  padding-top: 20px; border-top: 1px solid var(--line); margin-top: 20px;
}
.ride-foot .dim { flex: 1; font-size: 13px; }
.stop-btn {
  background: var(--surface); color: var(--text); border: 0;
  border-radius: 11px; padding: 12px 20px; font: inherit; font-weight: 600; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }