:root { color-scheme: light; font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif; color: #103330; background: #eff6f3; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.shell { width: min(100%, 620px); min-height: 100vh; margin: auto; padding: 38px 22px 28px; background: linear-gradient(160deg, #d9f2e8 0, #f7fbf8 45%, #eef6f2 100%); }
header { padding: 6px 4px 30px; }
.eyebrow { margin: 0 0 10px; color: #0b7666; font-size: .72rem; font-weight: 800; letter-spacing: .13em; }
h1 { margin: 0; font-size: clamp(2.65rem, 10vw, 4rem); line-height: .96; letter-spacing: -.08em; }
h1 em { color: #0b7666; font-style: normal; }
.lede { max-width: 330px; margin: 18px 0 0; color: #526b67; line-height: 1.55; }
.route-card, .arrivals { padding: 22px; border: 1px solid rgba(10, 88, 75, .11); border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 12px 32px rgba(27, 72, 62, .08); }
.arrivals { margin-top: 16px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
h2 { margin: 0; font-size: 1.04rem; letter-spacing: -.035em; }
.status, time { color: #627773; font-size: .75rem; }
.status { padding: 5px 8px; border-radius: 999px; background: #e6f3ef; color: #0b7666; font-weight: 700; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: #3d5a55; font-size: .8rem; font-weight: 700; }
input, select, button { font: inherit; }
input, select { width: 100%; min-height: 46px; border: 1px solid #c9d9d4; border-radius: 12px; padding: 0 13px; color: #143834; background: #fff; }
input:focus, select:focus { outline: 3px solid #bce6db; border-color: #0b7666; }
.search-row { display: flex; gap: 8px; }
.search-row input { min-width: 0; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
button { min-height: 46px; border: 0; border-radius: 12px; padding: 0 15px; font-weight: 800; cursor: pointer; }
.primary { background: #0b7666; color: white; box-shadow: 0 7px 15px rgba(11, 118, 102, .22); }
.primary:hover { background: #075d50; }
.secondary { flex: 0 0 auto; background: #e6f2ee; color: #0b7666; }
button:disabled { cursor: wait; opacity: .6; }
.options { display: grid; gap: 8px; }
.option { width: 100%; min-height: auto; padding: 11px 12px; text-align: left; border: 1px solid #d4e1dd; background: #fff; color: #244641; }
.option strong, .option span { display: block; }
.option span { margin-top: 3px; color: #6a817c; font-size: .78rem; font-weight: 500; }
.option:hover { border-color: #0b7666; background: #f1faf7; }
.arrival-list { display: grid; gap: 10px; }
.train { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; padding: 15px 16px; border-radius: 16px; background: #f2f8f5; }
.train strong { font-size: 1.04rem; letter-spacing: -.03em; }
.eta { align-self: center; color: #0b7666; font-size: 1.12rem; font-weight: 900; }
.train p { grid-column: 1 / -1; margin: 2px 0 0; color: #5b716c; font-size: .82rem; }
.empty { padding: 27px 10px; color: #6a807b; text-align: center; font-size: .88rem; }
.message { min-height: 1.4em; margin: 14px 4px 0; color: #a03d36; font-size: .82rem; }
footer { margin: 42px 4px 0; color: #778b86; font-size: .72rem; line-height: 1.55; }
@media (max-width: 420px) { .shell { padding: 28px 16px 22px; } .route-card, .arrivals { padding: 18px; border-radius: 18px; } }