:root {
  --bg: #0b1020;
  --card: linear-gradient(180deg, rgba(20,30,58,.96), rgba(14,22,43,.97));
  --border: rgba(255,255,255,.08);
  --text: #eef3ff;
  --muted: #a8b7dd;
  --white-box: #ffffff;
  --white-border: #d9e1ef;
  --dark-text: #101828;
  --dark-muted: #596273;
  --accent: #61a5ff;
  --shadow: 0 14px 32px rgba(0,0,0,0.3);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background: #000000;
  color: var(--text);
}
.app-shell { width: min(1760px, calc(100% - 20px)); margin: 16px auto 28px; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 14px;
}
.card h2 { margin: 0 0 10px; font-size: 17px; }
.top-cards { display:grid; grid-template-columns: .86fr 1.72fr 1.05fr .95fr; gap:12px; align-items:stretch; margin-bottom:14px; }
.top-cards.no-elevator { grid-template-columns: .84fr 1.95fr 1.08fr; }
.summary-card, .transport-card-wrap, .controls-card, .elevator-status-card { min-width:0; }
.live-time-box, .helper-box, .empty-state, .transport-card, .step-card, .info-list li, .next-step-box,
.compare-card, .elevator-item, .compare-meta-item, .transport-meta, .route-tab, .sort-btn, select,
.checkbox-field, .toggle-inline-btn {
  background: var(--white-box);
  border: 1px solid var(--white-border);
  color: var(--dark-text);
  border-radius: 12px;
}
.live-time-box { padding:10px; margin-bottom:10px; }
.live-time-label, .field span, .transport-meta span, .compare-meta-item span, .elevator-item span,
.live-time-desc, .helper-box p, .empty-state, .info-list li, .step-detail, .step-time, .next-step-box,
.transport-status, .transport-empty, .elevator-now, .compare-rank, .route-group-rank, .walk-note,
.transport-note, .route-group-estimate, .compare-meta-item small { color: var(--dark-muted); }
.live-time-label, .field span, .transport-meta span, .compare-meta-item span, .elevator-item span, .compare-meta-item small {
  display:block; font-size:10px; font-weight:700;
}
.live-time-value { margin-top:4px; font-size:clamp(18px,1.6vw,24px); font-weight:900; color:var(--dark-text); }
.live-time-desc, .helper-box p, .empty-state, .info-list li, .step-detail, .step-time, .next-step-box, .transport-status, .transport-empty, .elevator-now { font-size:11px; line-height:1.5; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.field { display:flex; flex-direction:column; gap:5px; }
.field-span-2 { grid-column: 1 / -1; }
select { width:100%; height:38px; padding:0 10px; font-size:12px; }
.checkbox-field { display:flex; flex-direction:row; align-items:center; gap:8px; min-height:38px; padding:0 10px; }
.checkbox-field input { width:15px; height:15px; accent-color: var(--accent); }
.checkbox-field span { margin:0; color:var(--dark-text); font-size:12px; }
.ghost-btn, .toggle-inline-btn, .sort-btn { background:var(--white-box); }
.sort-toolbar { align-items:center; justify-content:flex-end; }
.sort-btn.active, .route-tab.active { background:#eef7ff; border-color:#9cc8ff; }
.route-selector { margin-bottom:8px; }
.route-tab, .toggle-inline-btn, .sort-btn { min-height:32px; }
.route-tab { padding:0 10px; font-size:11px; font-weight:800; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.card-head-wrap { align-items:center; }
.helper-box { margin-top:10px; padding:10px; }
.helper-box strong { display:block; margin-bottom:5px; font-size:11px; color:var(--dark-text); }
.helper-box p { margin:0; }
.empty-state { padding:12px; }
.summary-box, .route-steps, .transport-list { display:grid; gap:8px; }
.compare-card, .route-group { padding:10px; }
.route-group { background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; }
.compare-card.best, .route-group.best-group { border-color: rgba(126,240,208,.58); }
.compare-card.alt, .route-group.compare-group { border-color: rgba(97,165,255,.58); }
.compare-head, .route-group-head, .transport-head, .step-top, .elevator-status-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.compare-head-stack, .route-group-head-stack { align-items:stretch; }
.compare-rank, .route-group-rank { font-size:10px; font-weight:900; margin-bottom:5px; }
.compare-route, .route-group-path { font-size:14px; font-weight:800; line-height:1.5; color:var(--dark-text); word-break:keep-all; }
.compare-meta-grid { display:grid; gap:8px; margin-top:8px; }
.compare-meta-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.compare-meta-item, .elevator-item, .transport-meta { padding:9px; }
.compare-meta-item strong, .elevator-item strong, .transport-meta strong, .next-step-box strong, .step-time strong, .step-detail strong { color:var(--dark-text); }
.schedule-lines { display:grid; gap:3px; margin-top:4px; font-size:12px; line-height:1.45; font-weight:800; color:var(--dark-text); }
.compare-meta-item.full { grid-column:1 / -1; }
.summary-extra-grid, .route-extra-stack, .boarding-extra-grid { display:grid; gap:8px; margin-top:2px; }
.boarding-extra-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.transport-card { padding:10px; }
.transport-route { font-size:12px; font-weight:900; color:var(--dark-text); }
.transport-name { margin-top:3px; font-size:10px; color: var(--dark-muted); }
.transport-note { margin-top:7px; font-size:10px; color: var(--dark-muted); }
.transport-status { margin:8px 0 7px; }
.transport-meta-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.transport-meta.full { grid-column: 1 / -1; }
.transport-segment { display:grid; gap:4px; }
.transport-segment-line { font-size:11px; line-height:1.4; color:var(--dark-text); }
.count-badge, .elevator-cycle, .step-type { padding:5px 8px; border-radius:999px; font-size:10px; font-weight:800; background:#f1f4fa; border:1px solid var(--white-border); color:var(--dark-text); }
.route-card, .info-card { margin-bottom:14px; }
.route-steps-inner { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:7px; margin-top:8px; }
.step-card { padding:10px; min-width: 0; }
.recommended-step { border-color: rgba(126,240,208,.58); }
.compare-step { border-color: rgba(97,165,255,.58); }
.step-index { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; background:#eef7ff; color:#0d3a73; font-size:10px; font-weight:900; flex:0 0 auto; }
.step-route { flex:1; font-size:12px; font-weight:900; line-height:1.35; color:var(--dark-text); }
.step-detail, .step-time, .next-step-box { font-size:10px; line-height:1.5; }
.step-time, .next-step-box { margin-top:7px; }
.next-step-box { padding:8px 9px; }
.info-content.hidden { display:none; }
.info-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:10px; }
.info-grid h3 { margin:0 0 8px; font-size:13px; }
.info-list { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.info-list li { padding:8px 9px; font-size:11px; }
.elevator-title { font-size:12px; font-weight:900; color:var(--dark-text); }
.elevator-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.hidden { display:none !important; }
.compact-top-gap { margin-top:2px; }

@media (max-width: 1480px) {
  .top-cards { grid-template-columns: .90fr 1.52fr 1.06fr .95fr; }
  .top-cards.no-elevator { grid-template-columns: .88fr 1.72fr 1.05fr; }
  .route-steps-inner { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1240px) {
  .top-cards, .top-cards.no-elevator { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .summary-card { grid-column: span 2; }
  .info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .top-cards, .top-cards.no-elevator, .compare-meta-grid-2, .route-steps-inner, .info-grid, .boarding-extra-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .summary-card { grid-column: auto; }
  .card-head-wrap { flex-direction:column; align-items:flex-start; }
  .sort-toolbar { justify-content:flex-start; }
}
@media (max-width: 700px) {
  .app-shell { width:min(100% - 14px, 100%); margin:10px auto 18px; }
  .top-cards, .top-cards.no-elevator, .field-grid, .compare-meta-grid-2, .transport-meta-grid, .elevator-grid, .route-steps-inner, .info-grid, .boarding-extra-grid { grid-template-columns:1fr; }
  .field-span-2 { grid-column:auto; }
  .card { padding:12px; border-radius:16px; }
  .route-tab, .sort-btn, .toggle-inline-btn { width:100%; }
}


.route-tab, .sort-btn, .toggle-inline-btn { position: relative; z-index: 5; pointer-events: auto; user-select: none; }
.route-tab { transition: background .12s, color .12s, border-color .12s, transform .05s; }
.route-tab:hover { border-color:#6ea8ff; }
.route-tab:active { transform: translateY(1px); }
.route-tab.active { background:#2f6bff !important; color:#fff !important; border-color:#2f6bff !important; box-shadow:0 0 0 2px rgba(47,107,255,.16); }
.sort-btn.active { background:#2f6bff !important; color:#fff !important; border-color:#2f6bff !important; }


/* 출발/도착 바꾸기 버튼 강조 */
#swapBtn{
  background:#e8f7ee !important;
  border-color:#9bd3ad !important;
  color:#196b35 !important;
}
#swapBtn:hover{
  background:#d9f0e2 !important;
  border-color:#7fbe95 !important;
}
#swapBtn:active{
  background:#cce8d7 !important;
}

#excludeWalkInfoInput + span { font-weight: 700; }


/* 가독성 개선: 어두운 배경 위 경로/엘리베이터 텍스트는 흰색으로 */
.route-group-path,
.route-group-rank,
.route-card > .card-head h2,
.elevator-status-card h2,
.elevator-title,
.elevator-now {
  color: var(--text) !important;
}

.route-group, .route-group-head, .route-group-head *:not(.step-card):not(.step-card *), .elevator-status-top {
  color: var(--text);
}

.elevator-status-top .elevator-cycle {
  color: var(--dark-text);
}


#swapBtn { border-radius: 18px !important; }

.boarding-pair-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; width:100%; }
.boarding-pair-grid .transport-card { width:100%; }
.section-toggle-row.compact-top-gap { width:100%; }
.section-toggle-row.compact-top-gap .toggle-inline-btn { border-radius: 14px; }
@media (max-width: 980px) { .boarding-pair-grid { grid-template-columns: 1fr; } }


.transport-status{
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.transport-status.status-ready{
  color: #108a43;
  background: rgba(16,138,67,.12);
  border-color: rgba(16,138,67,.28);
}
.transport-status.status-urgent{
  color: #d92d20;
  background: rgba(217,45,32,.12);
}
.transport-status.status-waiting{
  color: #a86b00;
  background: rgba(245,158,11,.16);
}
.transport-status.status-closed{
  color: #596273;
  background: rgba(89,98,115,.10);
  border-color: rgba(89,98,115,.20);
}
.transport-segment-line{
  font-size: 11px;
  line-height: 1.45;
  margin-top: 2px;
}
.transport-line-departure{
  color:#1d4ed8;
  font-weight: 900;
}
.transport-line-arrival{
  color:#d92d20;
  font-weight: 900;
}



/* ===== 버튼/툴바 정리 ===== */
.app-shell .button-row,
.app-shell .sort-toolbar,
.app-shell .route-selector,
.app-shell .section-toggle-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.app-shell .button-row{ margin-top:12px; }
.app-shell .route-selector{ margin:0 0 10px; }
.app-shell .section-toggle-row{ margin-top:10px; }

.app-shell button,
.app-shell .route-tab,
.app-shell .sort-btn,
.app-shell .toggle-inline-btn{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--white-border);
  background:var(--white-box);
  color:var(--dark-text);
  font-size:11px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  vertical-align:middle;
  box-shadow:none;
  margin:0;
}

.app-shell .route-tab{
  min-width:92px;
  padding:0 16px;
}

.app-shell .sort-btn{
  min-width:110px;
  padding:0 14px;
}

.app-shell .toggle-inline-btn{
  min-width:136px;
  padding:0 16px;
}

.app-shell .ghost-btn{
  min-width:150px;
  padding:0 18px;
}

.app-shell .card-head{
  row-gap:10px;
}

.app-shell .sort-toolbar{
  justify-content:flex-end;
}

.app-shell .route-tab:hover,
.app-shell .sort-btn:hover,
.app-shell .toggle-inline-btn:hover,
.app-shell #swapBtn:hover{
  transform:translateY(-1px);
}

.app-shell .route-tab:active,
.app-shell .sort-btn:active,
.app-shell .toggle-inline-btn:active,
.app-shell #swapBtn:active{
  transform:translateY(0);
}

.app-shell .route-tab.active,
.app-shell .sort-btn.active{
  background:#2f6bff !important;
  color:#fff !important;
  border-color:#2f6bff !important;
  box-shadow:0 0 0 2px rgba(47,107,255,.16);
}

.app-shell #swapBtn{
  background:#e8f7ee !important;
  border-color:#9bd3ad !important;
  color:#196b35 !important;
  border-radius:18px !important;
}

.app-shell .compact-top-gap{
  margin-top:10px;
}

@media (max-width: 1180px){
  .app-shell .card-head.card-head-wrap{
    flex-direction:column;
    align-items:flex-start;
  }
  .app-shell .sort-toolbar{
    justify-content:flex-start;
  }
}

@media (max-width: 700px){
  .app-shell button,
  .app-shell .route-tab,
  .app-shell .sort-btn,
  .app-shell .toggle-inline-btn{
    width:100%;
  }
  .app-shell .sort-toolbar,
  .app-shell .route-selector,
  .app-shell .section-toggle-row,
  .app-shell .button-row{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
}