:root {
  color-scheme: light;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --paper: #ffffff;
  --soft-paper: #f9fafb;
  --sky: #eff6ff;
  --blue: #2563eb;
  --deep: #1e3a5f;
  --aqua: #0ea5e9;
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #f3f4f6;
}

.app-shell {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 36px;
}

.hero {
  min-height: 160px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 32px 36px;
  color: white;
  background: linear-gradient(130deg, #071829 0%, #0d2d52 40%, #0e4272 75%, #0c5591 100%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(5,18,38,.45);
}

/* 상단 LED 바 — 공항 안내판 느낌 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    #38bdf8 18%,
    #7dd3fc 38%,
    #f4c542 52%,
    #7dd3fc 66%,
    #38bdf8 82%,
    transparent 100%);
  animation: ledScan 3.5s ease-in-out infinite alternate;
  opacity: .9;
}

/* 기존 ::after 비활성화 — runway-strip 으로 대체 */
.hero::after { display: none; }

/* 도트 그리드 — 레이더 느낌 */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(120,190,255,.18) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at 70% 50%, rgba(0,0,0,.6), transparent 70%);
}

.hero-copy { position: relative; z-index: 3; }
.hero-panel { position: relative; z-index: 3; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #7dd3fc;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
}

h1 {
  margin: 10px 0 8px;
  font-size: clamp(26px, 3.5vw, 44px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: white;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}

p {
  margin: 0;
  max-width: 680px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.hero-panel {
  z-index: 1;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  border-radius: 12px;
}

.flight-code {
  display: grid;
  place-items: center;
  height: 62px;
  border-radius: 8px;
  color: #071829;
  background: #f4c542;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 0 16px rgba(244,197,66,.35);
}

.panel-label,
.select-wrap span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero-panel .panel-label { color: var(--muted); }
.hero-panel strong { font-size: 15px; }

.toolbar {
  display: flex;
  gap: 10px;
  align-items: end;
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.select-wrap { flex: 1; }
.date-control { max-width: 190px; }
.forecast-control { max-width: 180px; }

select,
input[type="date"],
button {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font: inherit;
}

select,
input[type="date"] {
  width: 100%;
  padding: 0 12px;
  font-size: 14px;
}

button {
  min-width: 100px;
  padding: 0 16px;
  border-color: var(--blue);
  background: var(--blue);
  color: white;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease;
}

button:hover { background: #1d4ed8; transform: none; }

.status-pill {
  min-width: 160px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--sky);
  color: var(--blue);
  font-weight: 700;
  font-size: 13px;
  animation: none;
  border: 1px solid #bfdbfe;
}

.timer-widget {
  margin: 0 0 16px;
  padding: 18px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.timer-widget-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.timer-widget-head span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.timer-widget-head h2 {
  margin: 4px 0 0;
  font-size: 25px;
}

.timer-widget-head p {
  max-width: 520px;
  color: var(--muted);
  text-align: right;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.timer-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, 160px) auto;
  gap: 12px;
  align-items: end;
  margin-top: 16px;
}

.timer-buffer-label span { color: var(--muted); font-size: 12px; font-weight: 700; display: block; margin-bottom: 6px; }

.timer-form label span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.timer-form input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  text-transform: uppercase;
}

.timer-result {
  margin-top: 14px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f7fafc;
  color: var(--ink);
}

.timer-result.is-green { border-color: rgba(28, 155, 100, .34); background: #effaf4; }
.timer-result.is-yellow { border-color: rgba(217, 136, 6, .36); background: #fff8e8; }
.timer-result.is-red,
.timer-result.is-error { border-color: rgba(194, 65, 45, .34); background: #fff2ef; }
.timer-result.is-loading { display: flex; gap: 10px; align-items: center; color: var(--blue); font-weight: 800; }
.timer-result.is-idle { color: var(--muted); }

.timer-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(23, 105, 170, .18);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: timerSpin .8s linear infinite;
}

.timer-main {
  display: grid;
  gap: 4px;
}

.timer-flight {
  color: var(--blue);
  font-weight: 900;
}

.timer-main strong {
  font-size: 24px;
}

.timer-main em {
  color: var(--green);
  font-style: normal;
}

.timer-result.is-yellow .timer-main em { color: var(--amber); }
.timer-result.is-red .timer-main em { color: var(--red); }

.timer-main small,
.timer-action span {
  color: var(--muted);
}

.timer-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.timer-breakdown div {
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(217, 227, 237, .82);
}

.timer-breakdown dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.timer-breakdown dd {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 900;
}

.timer-breakdown dd span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.timer-breakdown .timer-wide {
  grid-column: span 3;
  border-color: rgba(28, 155, 100, .22);
  background: linear-gradient(180deg, #f6fcf8, #ffffff);
}

.timer-breakdown .timer-wide dd {
  color: #127349;
}

.timer-action {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.timer-action b {
  font-size: 19px;
}

.summary-grid,
.terminal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.summary-card,
.terminal-card,
.debug-card,
.terminal-map-panel {
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.summary-card { padding: 16px 18px; }
.summary-card span,
.meta-row span { color: var(--muted); font-size: 12px; }
.summary-card strong { display: block; margin-top: 4px; font-size: 22px; }

.terminal-card {
  padding: 20px;
  position: relative;
  overflow: hidden;
  animation: none;
  transition: box-shadow .15s ease;
}

.terminal-card:hover { transform: none; box-shadow: 0 4px 12px rgba(0,0,0,.10); }
.terminal-card:nth-child(2) { animation-delay: 0; }

.terminal-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--blue);
}

.terminal-card.busy::before { background: var(--red); }
.terminal-card.medium::before { background: var(--amber); }
.terminal-card.good::before { background: var(--green); }

.card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.terminal-name { margin: 0; font-size: 24px; }

.source-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--soft-paper);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--line);
}

.level {
  margin-top: 14px;
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.level strong { font-size: 36px; line-height: 1; }
.level span { color: var(--muted); font-weight: 600; font-size: 14px; }

.headline-metrics {
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.headline-metrics b { font-size: 18px; line-height: 1; }

.meter {
  height: 8px;
  margin: 14px 0 12px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}

.meter-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green) 0%, var(--amber) 60%, var(--red) 100%);
  background-size: 180% 100%;
  transition: width .4s ease;
  animation: none;
}

.meter::after { display: none; }

.meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.meta-row {
  padding: 10px;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  background: #f8fbfe;
}

.meta-row strong { display: block; margin-top: 3px; word-break: keep-all; }

.map-link,
.gate-chip,
.terminal-gate {
  position: absolute;
  min-width: 94px;
  height: auto;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-areas: "num label" "num time" "num wait";
  gap: 2px 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(46, 86, 122, .20);
  border-radius: 8px;
  background: rgba(255,255,255,.97);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(17, 40, 65, .13);
  z-index: 4;
  animation: gateFloat 3.4s ease-in-out infinite;
}

.map-link {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.map-link:hover { background: transparent; color: #0d4f86; transform: none; }

.gate-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e5edf5;
}

.gate-section-title { margin-bottom: 10px; color: #47566a; font-size: 13px; font-weight: 800; }

.gate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.gate-chip {
  min-width: 0;
  height: auto;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #dbe6f0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f5f9fc);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.gate-chip strong { font-size: 14px; }
.gate-chip span { color: var(--muted); font-size: 12px; }
.gate-chip:hover { transform: translateY(-1px); border-color: #9fc2dc; background: #eef7ff; }
.gate-chip.medium { border-color: rgba(217, 136, 6, .36); }
.gate-chip.busy { border-color: rgba(194, 65, 45, .36); }

.terminal-map-panel {
  margin-top: 18px;
  padding: 20px;
  overflow: hidden;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 14px;
}

.section-head span { color: var(--blue); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.section-head h2 { margin: 4px 0 0; font-size: 24px; }
.section-head p { max-width: 420px; color: var(--muted); font-size: 14px; }

.terminal-render {
  min-height: 360px;
}

.terminal-canvas {
  position: relative;
  height: clamp(430px, 42vw, 560px);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 96%, rgba(255,255,255,.98) 0 17%, transparent 17.5%),
    linear-gradient(180deg, rgba(239, 247, 252, .92), rgba(255,255,255,.98));
  border: 1px solid #dfe9f2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}


.terminal-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23, 105, 170, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 105, 170, .05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 74%);
}

.security-band {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 59%;
  display: flex;
  justify-content: space-between;
  z-index: 2;
  opacity: .58;
}

.security-band span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #6d7884;
  color: white;
  font-size: 12px;
  font-weight: 900;
}

.terminal-legend {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: flex;
  gap: 10px;
  z-index: 5;
  padding: 8px 10px;
  border: 1px solid #dbe6f0;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(8px);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.terminal-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.terminal-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.terminal-legend .good { background: var(--green); }
.terminal-legend .medium { background: var(--amber); }
.terminal-legend .busy { background: var(--red); }
.terminal-wing {
  position: absolute;
  width: 34%;
  height: 26%;
  top: 14%;
  background: rgba(203, 225, 236, .55);
  border: 12px solid rgba(230, 240, 247, .86);
  border-radius: 999px;
  opacity: .78;
  box-shadow: inset 0 0 0 1px rgba(129, 166, 188, .16);
}

.wing-left { left: -6%; transform: rotate(-34deg); }
.wing-right { right: -6%; transform: rotate(34deg); }

.terminal-concourse {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 18%;
  height: 49%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background:
    linear-gradient(180deg, rgba(222, 239, 247, .96), rgba(238, 247, 251, .92)),
    repeating-linear-gradient(72deg, rgba(47,92,124,.08) 0 8px, transparent 8px 34px);
  border: 13px solid rgba(232, 242, 248, .96);
  border-bottom: 0;
  box-shadow: inset 0 -26px 0 rgba(255,255,255,.58), 0 10px 26px rgba(63,95,125,.10);
}

.terminal-inner-arc {
  position: absolute;
  left: 17%;
  right: 17%;
  top: 56%;
  height: 32%;
  border-top: 2px solid rgba(143, 174, 193, .30);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(245,248,251,.85), transparent 58%);
}

.terminal-entrance {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  padding: 9px 15px;
  border-radius: 999px;
  background: #102033;
  color: white;
  font-weight: 900;
  z-index: 4;
  box-shadow: 0 10px 24px rgba(16,32,51,.18);
}

.route-line {
  position: absolute;
  height: 4px;
  transform-origin: left center;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,105,170,.15), rgba(23,105,170,.9));
  z-index: 3;
  animation: routePulse 1.6s ease-in-out infinite;
}

.route-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #f4c542;
  box-shadow: 0 0 0 8px rgba(244,197,66,.18);
  z-index: 5;
  animation: dotPulse 1.4s ease-in-out infinite;
}

.terminal-gate {
  position: absolute;
  min-width: 94px;
  height: auto;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-areas: "num label" "num time" "num wait";
  gap: 2px 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(46, 86, 122, .20);
  border-radius: 8px;
  background: rgba(255,255,255,.97);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(17, 40, 65, .13);
  z-index: 4;
  animation: gateFloat 3.4s ease-in-out infinite;
}

.terminal-gate span {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 30px;
  height: 54px;
  border-radius: 7px;
  background: linear-gradient(180deg, #40358e, #2d266f);
  color: #f4e94a;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.terminal-gate small { grid-area: label; color: var(--muted); font-size: 11px; font-weight: 800; }
.terminal-gate strong { grid-area: time; font-size: 15px; }
.terminal-gate em { grid-area: wait; color: var(--muted); font-style: normal; font-size: 12px; }
.terminal-gate.good { border-color: rgba(28,155,100,.30); box-shadow: 0 10px 24px rgba(17,40,65,.12), inset 4px 0 0 rgba(28,155,100,.72); }
.terminal-gate.medium { border-color: rgba(217,136,6,.42); box-shadow: 0 10px 24px rgba(17,40,65,.12), inset 4px 0 0 rgba(217,136,6,.72); }
.terminal-gate.busy { border-color: rgba(194,65,45,.42); box-shadow: 0 10px 24px rgba(17,40,65,.12), inset 4px 0 0 rgba(194,65,45,.72); }
.terminal-gate.is-best { box-shadow: 0 0 0 3px rgba(244,197,66,.26), 0 14px 30px rgba(17,40,65,.18); }
.terminal-gate:hover { transform: translate(-50%, -53%); }

.terminal-note {
  position: absolute;
  left: 18px;
  bottom: 14px;
  color: var(--muted);
  font-size: 13px;
  z-index: 4;
}

.terminal-empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed #cfdce8;
  border-radius: 8px;
  background: #f8fbfe;
  font-weight: 800;
  text-align: center;
  padding: 24px;
}

.debug-card { margin-top: 16px; padding: 14px 16px; }
.debug-card summary { cursor: pointer; font-weight: 800; }
pre { margin: 12px 0 0; white-space: pre-wrap; word-break: break-word; color: #203047; }

.empty {
  grid-column: 1 / -1;
  padding: 28px;
  text-align: center;
  color: var(--muted);
  background: white;
  border-radius: 8px;
  border: 1px dashed var(--line);
}

.map-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(7, 18, 32, .46);
}

.map-modal.is-open { display: grid; }

.map-dialog {
  width: min(920px, 96vw);
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 26px 80px rgba(4, 16, 30, .32);
}

.map-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #e4edf5;
}

.map-head span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.map-head strong { font-size: 20px; }
.map-head button { min-width: 72px; height: 38px; }

.gate-map {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  background: #e8eef4;
}

.map-fallback {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
}

.is-hidden { display: none !important; }

/* ── 히어로 제목 명시적 색상 고정 ── */
.hero-copy h1 {
  color: #ffffff !important;
  font-weight: 800;
}
.hero-copy .eyebrow {
  color: #7dd3fc !important;
}
.hero-copy > p {
  color: #111827 !important;      /* 어두운 색으로 선명하게 */
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(6px) !important;
}

.hero-panel .panel-label {
  color: rgba(255,255,255,.55) !important;
}
.hero-panel strong {
  color: #ffffff !important;
}

/* ══════════════════════════════════════
   히어로 배경 레이어
══════════════════════════════════════ */

/* 오로라 글로우 */
.hero-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-aurora::before {
  content: "";
  position: absolute;
  width: 65%;
  height: 130%;
  top: -30%;
  right: -8%;
  background: radial-gradient(ellipse, rgba(37,99,235,.20), transparent 62%);
  animation: auroraA 11s ease-in-out infinite alternate;
}
.hero-aurora::after {
  content: "";
  position: absolute;
  width: 45%;
  height: 100%;
  bottom: -25%;
  left: 12%;
  background: radial-gradient(ellipse, rgba(14,165,233,.14), transparent 62%);
  animation: auroraB 15s ease-in-out infinite alternate-reverse;
}
@keyframes auroraA {
  0%   { transform: translate(0,0)    scale(1);    opacity: .7; }
  100% { transform: translate(-2%,4%) scale(1.09); opacity: 1;  }
}
@keyframes auroraB {
  0%   { transform: translate(0,0)   scale(1);    opacity: .8; }
  100% { transform: translate(3%,-3%) scale(1.11); opacity: 1;  }
}

/* 별 (box-shadow 도트) */
.hero-stars {
  position: absolute;
  top: 0; left: 0;
  width: 1.5px; height: 1.5px;
  background: rgba(255,255,255,.7);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  box-shadow:
    78px  9px 0 0 rgba(255,255,255,.55),
    148px 5px 0 0 rgba(255,255,255,.4),
    203px 17px 0 0 rgba(255,255,255,.6),
    271px 8px 0 0 rgba(255,255,255,.35),
    342px 14px 0 0 rgba(255,255,255,.5),
    418px 4px 0 0 rgba(255,255,255,.45),
    487px 20px 0 0 rgba(255,255,255,.3),
    554px 7px 0 0 rgba(255,255,255,.55),
    623px 12px 0 0 rgba(255,255,255,.4),
    702px 3px 0 0 rgba(255,255,255,.5),
    765px 18px 0 0 rgba(255,255,255,.35),
    841px 10px 0 0 rgba(255,255,255,.45),
    110px 38px 0 0 rgba(255,255,255,.25),
    195px 50px 0 0 rgba(255,255,255,.2),
    318px 44px 0 0 rgba(255,255,255,.3),
    440px 55px 0 0 rgba(255,255,255,.22),
    567px 41px 0 0 rgba(255,255,255,.18),
    688px 58px 0 0 rgba(255,255,255,.25),
    800px 32px 0 0 rgba(255,255,255,.2);
  animation: starTwinkle 5s ease-in-out infinite alternate;
}
@keyframes starTwinkle {
  0%   { opacity: .55; }
  50%  { opacity: 1;   }
  100% { opacity: .65; }
}

/* ══════════════════════════════════════
   이륙 애니메이션 씬
══════════════════════════════════════ */
.hero-runway-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

/* 활주로 에지 라이트 */
.runway-edge-lights {
  position: absolute;
  bottom: 10px;
  left: 0; right: 0;
  height: 24px;
}
.runway-edge-lights::before,
.runway-edge-lights::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
}
.runway-edge-lights::before {
  top: 0;
  background: repeating-linear-gradient(
    90deg, rgba(255,220,60,.55) 0 6px, transparent 6px 28px);
}
.runway-edge-lights::after {
  bottom: 0;
  background: repeating-linear-gradient(
    90deg, rgba(255,220,60,.55) 0 6px, transparent 6px 28px);
}

/* 활주로 센터라인 */
.runway-strip {
  position: absolute;
  bottom: 20px;
  left: 0; right: 0;
  height: 1.5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.38) 0 24px,
    transparent 24px 42px
  );
}

/* ── 3중 중첩 애니메이션 레이어 ──────── */

/* ① X 이동: 등속 선형 */
.plane-fly {
  position: absolute;
  bottom: 10px;
  left: -110px;
  animation: planeX 9.5s linear infinite;
  animation-delay: .8s;
}

/* ② Y 상승: 지상 구간은 고정, 이륙 후 가속 상승 */
.plane-lift {
  animation: planeY 9.5s cubic-bezier(.55,0,.1,1) infinite;
  animation-delay: .8s;
}

/* ③ 기수 회전: 부드럽게 올라갔다 안정 */
.plane-rotate {
  display: flex;
  align-items: center;
  position: relative;
  animation: planeR 9.5s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay: .8s;
  transform-origin: 20% 60%;
}

.liftoff-plane {
  width: 226px;
  height: 83px;
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 16px rgba(70,90,215,.42))
    drop-shadow(0  6px 12px rgba(0,0,0,.50));
  animation: planeGlow 9.5s ease-in-out infinite;
  animation-delay: .8s;
}

/* ── 콘트레일 (3-strand) ─────────────── */
.contrail {
  position: absolute;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  transform: translateY(-50%);
  animation: contrailW 9.5s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay: .8s;
  filter: blur(.8px);
}

.c-center {
  right: 216px;
  background: linear-gradient(270deg,
    rgba(255,255,255,.68) 0%,
    rgba(255,255,255,.22) 45%,
    transparent);
  box-shadow:
    0 -4px 0 0 rgba(255,255,255,.16),
    0  4px 0 0 rgba(255,255,255,.16);
}
.c-top {
  right: 216px;
  top: calc(50% - 6px);
  opacity: .52;
  background: linear-gradient(270deg,
    rgba(255,255,255,.42) 0%,
    transparent 58%);
  animation-delay: .86s;
}
.c-bot {
  right: 216px;
  top: calc(50% + 4px);
  opacity: .44;
  background: linear-gradient(270deg,
    rgba(255,255,255,.36) 0%,
    transparent 58%);
  animation-delay: .92s;
}

/* 엔진 글로우 */
.engine-glow {
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,140,40,.58), rgba(255,100,20,.2) 50%, transparent 72%);
  animation: enginePulse 1.2s ease-in-out infinite alternate;
}
@keyframes enginePulse {
  0%   { opacity: .5; transform: translateY(-50%) scaleX(1);    }
  100% { opacity: 1;  transform: translateY(-50%) scaleX(1.25); }
}

/* ── 3 개의 독립 키프레임 ─────────────── */

/* X: 0% → 100% 등속 */
@keyframes planeX {
  0%   { transform: translateX(0);     opacity: 0; }
  4%   { opacity: 1; }
  91%  { opacity: .9; }
  96%  { opacity: 0; }
  100% { transform: translateX(960px); opacity: 0; }
}

/* Y: 지상 28% 유지 → 이륙 후 급상승 */
@keyframes planeY {
  0%   { transform: translateY(0); }
  28%  { transform: translateY(0); }       /* 활주 구간 지상 */
  34%  { transform: translateY(-8px); }   /* 기수 들릴 때 살짝 */
  100% { transform: translateY(-168px); } /* 최고 상승점 */
}

/* R: 수평 → 기수상승 → 완만 순항 */
@keyframes planeR {
  0%   { transform: rotate(0deg);  }
  26%  { transform: rotate(0deg);  }   /* 활주 중 수평 */
  36%  { transform: rotate(-10deg); }  /* 회전 포인트 */
  48%  { transform: rotate(-20deg); }  /* 최대 기수 상승 */
  65%  { transform: rotate(-17deg); }  /* 순항 각도로 완화 */
  85%  { transform: rotate(-14deg); }
  100% { transform: rotate(-12deg); }
}

/* 비행기 글로우 (이륙 후 강해짐) */
@keyframes planeGlow {
  0%   { filter: drop-shadow(0 0 4px rgba(120,200,255,.3)) drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
  30%  { filter: drop-shadow(0 0 4px rgba(120,200,255,.3)) drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
  55%  { filter: drop-shadow(0 0 14px rgba(120,200,255,.7)) drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
  85%  { filter: drop-shadow(0 0 10px rgba(120,200,255,.5)) drop-shadow(0 3px 6px rgba(0,0,0,.3));  }
  100% { filter: drop-shadow(0 0 4px rgba(120,200,255,.3)) drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
}

/* 콘트레일 폭 */
@keyframes contrailW {
  0%   { width: 0;     opacity: 0; }
  5%   { width: 18px;  opacity: .5; }
  28%  { width: 55px;  opacity: .7; }
  50%  { width: 105px; opacity: .65; }
  72%  { width: 125px; opacity: .45; }
  88%  { width: 90px;  opacity: .15; }
  100% { width: 0;     opacity: 0; }
}

/* ── 키프레임 ── */
@keyframes runwayDrift {
  from { transform: translateX(0) skewX(-18deg); }
  to { transform: translateX(-82px) skewX(-18deg); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes barFill {
  from { width: 0 !important; }
}

@keyframes softPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .65; }
}

@keyframes heroAccent {
  0%, 100% { background: var(--blue); }
  50%       { background: var(--aqua); }
}

@keyframes ledScan {
  0%   { opacity: .5; filter: brightness(.8); }
  50%  { opacity: 1;  filter: brightness(1.3); }
  100% { opacity: .5; filter: brightness(.8); }
}

@keyframes cardRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes timerSpin {
  to { transform: rotate(360deg); }
}

@keyframes gradientFlow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

@keyframes routePulse {
  0%, 100% { opacity: .56; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.12); }
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(244,197,66,.16); }
  50% { box-shadow: 0 0 0 14px rgba(244,197,66,.06); }
}

@keyframes gateFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -3px; }
}

/* ── 페이지 진입 애니메이션 ── */
.hero          { animation: fadeIn   .5s ease both; }
.hero-copy     { animation: slideRight .55s ease both; }
.hero-panel    { animation: fadeIn   .55s .1s ease both; }
.hero::before  { animation: heroAccent 4s ease-in-out infinite; }

.toolbar       { animation: fadeUp .45s .08s ease both; }
.timer-widget  { animation: fadeUp .45s .12s ease both; }
.summary-grid  { animation: fadeUp .45s .16s ease both; }
.terminal-grid { animation: fadeUp .45s .20s ease both; }
.terminal-map-panel { animation: fadeUp .45s .24s ease both; }

.summary-card  { animation: fadeUp .4s ease both; }
.terminal-card { animation: fadeUp .4s ease both; }
.terminal-card:nth-child(2) { animation-delay: .07s; }

.status-pill   { animation: softPulse 2.8s ease-in-out infinite; }

/* 카드 호버 리프트 */
.terminal-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.terminal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

.summary-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* 미터바 채워지는 애니메이션 */
.meter-bar {
  animation: barFill .9s cubic-bezier(.34,.06,.29,1) both;
}

@media (max-width: 820px) {
  .app-shell { width: min(100% - 20px, 1180px); padding-top: 12px; }
  .hero { grid-template-columns: 1fr; padding: 22px 18px; }
  .hero-panel { max-width: 360px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .status-pill { width: 100%; }
  .summary-grid,
  .terminal-grid { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: 1fr; }
  .gate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head { display: block; }
  .terminal-canvas {
  position: relative;
  height: clamp(430px, 42vw, 560px);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 96%, rgba(255,255,255,.98) 0 17%, transparent 17.5%),
    linear-gradient(180deg, rgba(239, 247, 252, .92), rgba(255,255,255,.98));
  border: 1px solid #dfe9f2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


.gate-chip.closed,
.terminal-gate.closed {
  opacity: .58;
  filter: grayscale(.35);
  border-color: #d5dde5;
  background: linear-gradient(180deg, #f4f7fa, #eef3f7);
}

.terminal-gate.closed span {
  background: linear-gradient(180deg, #7b8490, #5f6873);
  color: #e7edf4;
}

.terminal-gate.closed strong,
.gate-chip.closed strong {
  color: #5f6873;
}

.terminal-gate.closed.is-best {
  box-shadow: 0 10px 24px rgba(17,40,65,.10);
}

/* Quality patch: terminal render spacing and text alignment */
.hero-copy p {
  display: inline-flex;
  margin-top: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft-paper);
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.terminal-map-panel {
  padding: 22px;
}

.section-head {
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6eef5;
}

.section-head p {
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f1f7fc;
  color: #516173;
}

.terminal-canvas {
  height: clamp(500px, 44vw, 610px);
  background:
    radial-gradient(circle at 50% 98%, rgba(255,255,255,.98) 0 20%, transparent 20.5%),
    linear-gradient(180deg, rgba(236, 247, 252, .92), rgba(255,255,255,.98));
}

.terminal-concourse {
  left: 5%;
  right: 5%;
  top: 17%;
  height: 52%;
}

.terminal-inner-arc {
  left: 14%;
  right: 14%;
  top: 59%;
}

.security-band {
  left: 16%;
  right: 16%;
  top: 62%;
}

.terminal-legend {
  right: 18px;
  top: 16px;
  bottom: auto;
  box-shadow: 0 10px 24px rgba(17,40,65,.10);
}

.terminal-note {
  left: 18px;
  right: auto;
  bottom: 16px;
  max-width: min(520px, calc(100% - 240px));
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #dbe6f0;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  color: #516173;
  box-shadow: 0 10px 24px rgba(17,40,65,.10);
}

.terminal-note strong {
  color: var(--blue);
  white-space: nowrap;
}

.terminal-note span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal-gate {
  min-width: 76px;
  max-width: 86px;
  grid-template-columns: 26px 1fr;
  gap: 1px 6px;
  padding: 7px 8px;
  border-radius: 9px;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
}

.terminal-gate span {
  width: 26px;
  height: 46px;
  font-size: 13px;
}

.terminal-gate small {
  font-size: 10px;
  line-height: 1.1;
}

.terminal-gate strong {
  font-size: 14px;
  line-height: 1.1;
}

.terminal-gate em {
  font-size: 11px;
  line-height: 1.1;
}

.terminal-gate.is-best::after {
  content: "추천";
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 999px;
  background: #f4c542;
  color: #102033;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(17,40,65,.14);
}

.terminal-gate.closed::after {
  content: "";
}

.route-line {
  height: 5px;
  background: linear-gradient(90deg, rgba(23,105,170,.08), rgba(23,105,170,.75), rgba(244,197,66,.95));
  box-shadow: 0 0 18px rgba(23,105,170,.18);
}

.route-dot {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
}

.terminal-gate:hover {
  transform: translate(-50%, -54%) scale(1.02);
  z-index: 9;
}

@media (max-width: 980px) {
  .terminal-gate {
    min-width: 68px;
    max-width: 72px;
    grid-template-columns: 22px 1fr;
    padding: 6px;
  }
  .terminal-gate span { width: 22px; height: 42px; }
  .terminal-note { max-width: calc(100% - 36px); border-radius: 8px; }
  .terminal-note span { white-space: normal; }
}

/* 3D station render and bug fixes */
.map-link,
.gate-chip {
  position: static;
  transform: none;
  grid-template-columns: none;
  grid-template-areas: none;
  animation: none;
  z-index: auto;
}

.terminal-canvas-3d {
  perspective: 1200px;
  isolation: isolate;
}

.terminal-shadow {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 58%;
  height: 28%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(ellipse at center, rgba(49,74,95,.16), transparent 68%);
  filter: blur(12px);
  z-index: 0;
}

.terminal-deck {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 45%;
  height: 30%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(236,243,248,.92)),
    repeating-linear-gradient(78deg, rgba(95,118,134,.08) 0 9px, transparent 9px 32px);
  border-top: 1px solid rgba(119,156,178,.24);
  transform: rotateX(54deg);
  transform-origin: center bottom;
  box-shadow: 0 18px 38px rgba(29,62,88,.13);
  z-index: 1;
}

.gate-station {
  position: absolute;
  width: 154px;
  height: 92px;
  transform: translate(-50%, -50%) rotateX(0deg);
  transform-style: preserve-3d;
  z-index: 6;
  animation: stationFloat 4s ease-in-out infinite;
}

.gate-station.is-best {
  z-index: 8;
}

.station-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 74px;
  min-width: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1px solid rgba(36,30,105,.22);
  border-radius: 8px;
  background: linear-gradient(180deg, #463a9a, #2b266f 74%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 16px 26px rgba(31,29,91,.22);
}

.station-core span {
  color: #f5ea53;
  font-size: 22px;
  font-weight: 900;
}

.side-card {
  position: absolute;
  width: 64px;
  min-width: 0;
  height: 48px;
  padding: 6px 7px;
  display: grid;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(53,79,101,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  box-shadow: 0 12px 24px rgba(18,45,68,.14);
  backdrop-filter: blur(8px);
}

.side-card.east {
  left: 96px;
  top: 10px;
}

.side-card.west {
  left: -6px;
  bottom: 10px;
}

.side-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.side-card strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.12;
  white-space: normal;
}

.side-card.good { border-left: 4px solid var(--green); }
.side-card.medium { border-left: 4px solid var(--amber); }
.side-card.busy { border-left: 4px solid var(--red); }
.side-card.closed {
  opacity: .62;
  filter: grayscale(.3);
  border-left: 4px solid #8d98a4;
  background: rgba(242,246,249,.94);
}

.gate-station.is-best .station-core {
  box-shadow: 0 0 0 4px rgba(244,197,66,.24), inset 0 1px 0 rgba(255,255,255,.20), 0 18px 34px rgba(31,29,91,.24);
}

.gate-station.is-best::after {
  content: "추천";
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 999px;
  background: #f4c542;
  color: #102033;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(17,40,65,.14);
}

.gate-station:hover {
  z-index: 12;
  animation-play-state: paused;
}

.gate-station:hover .station-core,
.gate-station:hover .side-card {
  transform: translateY(-2px);
}

.station-core,
.side-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@keyframes stationFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -2px; }
}

@media (max-width: 980px) {
  .gate-station { width: 130px; height: 86px; }
  .side-card { width: 56px; font-size: 11px; }
  .side-card.east { left: 82px; }
  .side-card.west { left: -8px; }
  .station-core { width: 34px; height: 66px; }
  .station-core span { font-size: 19px; }
}

/* Rebuilt airport render: isolated from older terminal-gate rules */
.meta-row .map-link {
  position: static !important;
  display: inline-flex !important;
  align-items: baseline !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--blue) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: left !important;
  transform: none !important;
  box-shadow: none !important;
}

.airport-scene,
.airport-scene * {
  box-sizing: border-box;
}

.airport-scene button {
  font-family: inherit;
}

.airport-scene {
  position: relative;
  min-height: 610px;
  height: clamp(560px, 48vw, 680px);
  overflow: hidden;
  border: 1px solid rgba(159, 185, 207, .42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(249, 252, 255, .98), rgba(235, 245, 252, .86) 52%, rgba(255,255,255,.98) 100%),
    radial-gradient(circle at 50% 10%, rgba(49, 138, 196, .14), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 42px rgba(20, 48, 82, .10);
  isolation: isolate;
  perspective: 1200px;
}

.airport-skyline {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23,105,170,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,105,170,.045) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.15) 72%, transparent);
  z-index: 0;
}

.airport-apron {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 26px;
  height: 44%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(ellipse at center top, rgba(255,255,255,.92), rgba(232,241,248,.68) 54%, transparent 72%);
  border-top: 1px solid rgba(112, 151, 178, .20);
  z-index: 1;
}

.airport-building {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 92px;
  height: 360px;
  z-index: 2;
  transform: rotateX(8deg);
  transform-style: preserve-3d;
}

.airport-roof {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 258px;
  border-radius: 0 0 50% 50% / 0 0 36% 36%;
  background:
    linear-gradient(180deg, rgba(230, 244, 252, .95), rgba(216, 235, 246, .72)),
    repeating-linear-gradient(86deg, rgba(84,112,132,.10) 0 7px, transparent 7px 36px);
  clip-path: polygon(0 52%, 10% 34%, 21% 21%, 33% 13%, 45% 8%, 55% 8%, 67% 13%, 79% 21%, 90% 34%, 100% 52%, 96% 93%, 4% 93%);
  border: 1px solid rgba(158, 186, 205, .28);
  box-shadow: 0 24px 48px rgba(47, 84, 112, .12), inset 0 1px 0 rgba(255,255,255,.9);
}

.airport-glass {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 150px;
  height: 128px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(224,238,247,.62)),
    repeating-linear-gradient(78deg, rgba(85,111,128,.11) 0 8px, transparent 8px 30px);
  border-top: 1px solid rgba(127, 162, 184, .28);
  box-shadow: inset 0 18px 28px rgba(255,255,255,.45);
}

.airport-floor {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 260px;
  height: 58px;
  border-radius: 0 0 36px 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(235,243,248,.94));
  box-shadow: 0 18px 30px rgba(28, 61, 86, .10);
}

.airport-security-row {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 415px;
  display: flex;
  justify-content: space-between;
  z-index: 5;
}

.airport-security-row span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(180deg, #aab4bf, #818d99);
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(31, 54, 76, .13), inset 0 1px 0 rgba(255,255,255,.32);
}

.airport-entrance {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 7;
  padding: 12px 22px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(180deg, #17263a, #0e1828);
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(10, 22, 35, .22);
}

.airport-route {
  position: absolute;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(55, 112, 180, .18), rgba(49, 105, 179, .72), rgba(244, 197, 66, .95));
  transform-origin: left center;
  box-shadow: 0 0 18px rgba(59, 113, 178, .20);
  z-index: 4;
  animation: routeGlow 1.8s ease-in-out infinite alternate;
}

.airport-route-dot {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #f4c542;
  border: 7px solid rgba(244, 197, 66, .26);
  z-index: 9;
  box-shadow: 0 0 0 8px rgba(244,197,66,.12);
}

.airport-gate-node {
  position: absolute !important;
  width: 176px;
  height: 146px;
  transform: translate(-50%, -50%) !important;
  z-index: 8;
  transform-style: preserve-3d;
  animation: nodeBreathe 4.2s ease-in-out infinite;
}

.airport-gate-node.is-best {
  z-index: 12;
}

.airport-gate-core {
  position: absolute !important;
  left: 50%;
  top: 50%;
  width: 42px !important;
  min-width: 0 !important;
  height: 96px !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) skewY(-4deg) !important;
  border: 1px solid rgba(28, 26, 88, .28) !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, #5144aa 0%, #342982 58%, #231d63 100%) !important;
  box-shadow: 12px 16px 24px rgba(27, 30, 75, .24), inset 0 1px 0 rgba(255,255,255,.22) !important;
  color: #f6ec55 !important;
  display: grid !important;
  place-items: center !important;
}

.airport-gate-core::after {
  content: "";
  position: absolute;
  inset: 8px 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.11), transparent 60%);
}

.airport-gate-core span {
  position: relative;
  z-index: 1;
  color: #f6ec55;
  font-size: 24px;
  font-weight: 900;
}

.airport-side-card {
  position: absolute !important;
  min-width: 0 !important;
  width: 82px !important;
  height: 58px !important;
  padding: 7px 8px !important;
  display: grid !important;
  align-content: center !important;
  gap: 2px !important;
  border: 1px solid rgba(69, 102, 128, .20) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(237,245,250,.95)) !important;
  color: var(--ink) !important;
  text-align: left !important;
  line-height: 1.1 !important;
  box-shadow: 0 14px 24px rgba(17, 44, 68, .16), inset 0 1px 0 rgba(255,255,255,.8) !important;
  backdrop-filter: blur(8px);
  transform: none !important;
  z-index: 2;
}

.airport-gate-node.left .airport-side-card.west,
.airport-gate-node.right .airport-side-card.east {
  top: 8px;
}

.airport-gate-node.left .airport-side-card.east,
.airport-gate-node.right .airport-side-card.west {
  bottom: 8px;
}

.airport-gate-node.left .airport-side-card.west,
.airport-gate-node.left .airport-side-card.east {
  left: 4px;
}

.airport-gate-node.right .airport-side-card.west,
.airport-gate-node.right .airport-side-card.east {
  right: 4px;
}

.airport-side-card span {
  color: #356196;
  font-size: 11px;
  font-weight: 900;
}

.airport-side-card strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  white-space: normal;
  word-break: keep-all;
}

.airport-side-card em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.airport-side-card.good { border-left: 5px solid var(--green) !important; }
.airport-side-card.medium { border-left: 5px solid var(--amber) !important; }
.airport-side-card.busy { border-left: 5px solid var(--red) !important; }
.airport-side-card.closed {
  opacity: .70;
  border-left: 5px solid #8792a0 !important;
  background: linear-gradient(180deg, rgba(242,246,249,.94), rgba(226,234,241,.90)) !important;
  filter: saturate(.65);
}

.airport-side-card.is-best,
.airport-gate-node.is-best .airport-gate-core {
  box-shadow: 0 0 0 4px rgba(244, 197, 66, .25), 0 16px 30px rgba(17, 44, 68, .20), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.airport-gate-node.is-best::after {
  content: "추천";
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 999px;
  background: #f4c542;
  color: #102033;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(17, 40, 65, .16);
}

.airport-legend {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(173,194,211,.58);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 22px rgba(20,48,82,.09);
}

.airport-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #58677a;
  font-size: 12px;
  font-weight: 800;
}

.airport-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.airport-legend .good { background: var(--green); }
.airport-legend .medium { background: var(--amber); }
.airport-legend .busy { background: var(--red); }
.airport-legend .closed { background: #8792a0; }

.airport-note {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 10;
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: min(640px, calc(100% - 360px));
  padding: 10px 14px;
  border: 1px solid rgba(173,194,211,.42);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #5d6b7e;
  font-size: 13px;
  box-shadow: 0 10px 22px rgba(20,48,82,.08);
}

.airport-note strong {
  color: var(--blue);
  white-space: nowrap;
}

.airport-note span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes routeGlow {
  from { opacity: .58; filter: saturate(.9); }
  to { opacity: 1; filter: saturate(1.2); }
}

@keyframes nodeBreathe {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -3px; }
}

@media (max-width: 980px) {
  .airport-scene { min-height: 520px; height: 520px; }
  .airport-building { left: 2%; right: 2%; top: 110px; }
  .airport-gate-node { width: 128px; height: 130px; }
  .airport-side-card { width: 62px !important; height: 54px !important; padding: 6px !important; }
  .airport-side-card strong { font-size: 12px; }
  .airport-side-card em { display: none; }
  .airport-gate-core { width: 34px !important; height: 84px !important; }
  .airport-gate-core span { font-size: 20px; }
  .airport-security-row { left: 14%; right: 14%; }
  .airport-security-row span { width: 24px; height: 24px; font-size: 11px; }
  .airport-note { max-width: calc(100% - 36px); border-radius: 8px; bottom: 70px; }
  .airport-note span { white-space: normal; }
  .airport-legend { left: 18px; right: auto; flex-wrap: wrap; border-radius: 8px; }
}


/* Interactive indoor routes */
.airport-hover-route {
  position: absolute;
  height: 7px;
  border-radius: 999px;
  transform-origin: left center;
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.96) 0 9px, transparent 9px 17px),
    linear-gradient(90deg, rgba(23,105,170,.15), rgba(23,105,170,.88) 56%, rgba(244,197,66,.98));
  background-size: 44px 100%, 100% 100%;
  box-shadow: 0 0 18px rgba(23,105,170,.22), 0 0 0 1px rgba(255,255,255,.55) inset;
  transition: opacity .16s ease;
  animation: routeArrowFlow .72s linear infinite;
}

.airport-hover-route::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #f4c542;
  filter: drop-shadow(0 2px 5px rgba(35, 64, 92, .18));
}

.airport-hover-dot {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #f4c542;
  border: 6px solid rgba(244,197,66,.26);
  z-index: 12;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
  box-shadow: 0 0 0 8px rgba(244,197,66,.10);
}

.airport-hover-route.is-active,
.airport-hover-dot.is-active {
  opacity: 1;
}

.airport-side-card:hover,
.airport-gate-core:hover {
  filter: brightness(1.04);
}

.airport-route.is-recommended {
  opacity: .42;
  height: 4px;
  background: linear-gradient(90deg, rgba(82, 122, 166, .14), rgba(82, 122, 166, .38));
  box-shadow: none;
}

.map-dialog {
  width: min(1100px, calc(100vw - 40px));
}

.gate-map {
  height: min(72vh, 720px);
  background: #eef6fb;
}

.leaflet-popup-content span {
  color: #637083;
  font-size: 12px;
}

@keyframes routeArrowFlow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 44px 0, 0 0; }
}

/* Congestion meter color by level */
.meter-bar.clear {
  background: linear-gradient(100deg, #249f65 0%, #55b869 58%, #8bc96b 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 2px 8px rgba(36,159,101,.22);
}

.meter-bar.moderate {
  background: linear-gradient(100deg, #2f9f69 0%, #86bd55 46%, #e0b13f 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 2px 8px rgba(120,150,72,.22);
}

.meter-bar.warning {
  background: linear-gradient(100deg, #83b957 0%, #e0aa38 50%, #d9782e 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 2px 8px rgba(217,136,6,.22);
}

.meter-bar.danger {
  background: linear-gradient(100deg, #d68a27 0%, #d95e32 45%, #c2412d 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 2px 8px rgba(194,65,45,.24);
}

/* Final meter override: text status wins over numeric API score */
.meter-bar.clear {
  background: linear-gradient(100deg, #1f9d63 0%, #3eb46b 55%, #78c96b 100%) !important;
  background-size: 160% 100% !important;
}

.meter-bar.moderate {
  background: linear-gradient(100deg, #269c66 0%, #83bd55 50%, #e0ad3c 100%) !important;
  background-size: 160% 100% !important;
}

.meter-bar.warning {
  background: linear-gradient(100deg, #83b957 0%, #e0aa38 48%, #d8752d 100%) !important;
  background-size: 160% 100% !important;
}

.meter-bar.danger {
  background: linear-gradient(100deg, #d68a27 0%, #d95e32 44%, #c2412d 100%) !important;
  background-size: 160% 100% !important;
}


/* Terminal map alignment, check-in counters, and hover route overlay */
.terminal-canvas-3d {
  min-height: 600px;
}

.terminal-concourse {
  left: 3.5%;
  right: 3.5%;
  top: 13%;
  height: 53%;
}

.terminal-deck {
  left: 9%;
  right: 9%;
  top: 43%;
}

.security-band {
  left: 11%;
  right: 11%;
  top: 63%;
  z-index: 13;
}

.terminal-checkin-label {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translateX(-50%);
  z-index: 14;
  display: grid;
  gap: 2px;
  text-align: center;
  color: #1d58a5;
  font-weight: 900;
  pointer-events: none;
}

.terminal-checkin-label span {
  color: #1d58a5;
  font-size: 12px;
  font-weight: 800;
}

.terminal-checkins {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.checkin-island {
  position: absolute;
  width: 30px;
  height: 76px;
  transform: translate(-50%, -50%) rotate(-12deg);
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, rgba(74, 91, 103, .26) 0 5px, transparent 5px 10px),
    linear-gradient(180deg, rgba(240, 244, 247, .94), rgba(220, 228, 234, .92));
  border: 1px solid rgba(141, 158, 171, .18);
  box-shadow: 0 10px 18px rgba(35, 64, 92, .08);
}

.checkin-letter,
.checkin-number {
  position: absolute;
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  color: white;
  font-weight: 900;
  pointer-events: none;
  box-shadow: 0 8px 16px rgba(24, 58, 96, .16), inset 0 1px 0 rgba(255,255,255,.28);
}

.checkin-letter {
  width: 27px;
  height: 27px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #2f6fd0, #1f55b4);
  font-size: 13px;
}

.checkin-number {
  width: 34px;
  height: 28px;
  transform: translate(-50%, -50%) rotate(-12deg);
  border-radius: 7px;
  background: linear-gradient(180deg, #58b5d0, #2889a8);
  font-size: 17px;
}

.terminal-route-svg {
  position: absolute;
  inset: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.terminal-hover-path {
  fill: none;
  stroke: #ff4d9d;
  stroke-width: .82;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 7 4;
  stroke-dashoffset: 92;
  marker-end: url(#terminalRouteArrow);
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 77, 157, .9));
  transition: opacity .3s ease;
}

.terminal-hover-path.is-active {
  opacity: 1;
  animation: terminalRouteDraw 1.2s ease-in-out forwards, terminalRoutePulse 1.2s ease-in-out infinite alternate;
}

.terminal-hover-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  z-index: 15;
  border-radius: 50%;
  background: #ff4d9d;
  border: 4px solid rgba(255, 77, 157, .25);
  box-shadow: 0 0 0 8px rgba(255, 77, 157, .12), 0 0 18px rgba(255, 77, 157, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.terminal-hover-dot.is-active {
  opacity: 1;
  transform: scale(1.08);
}

.gate-station {
  z-index: 20;
}

.gate-station:hover .station-core {
  outline: 3px solid rgba(244, 197, 66, .58);
  outline-offset: 3px;
}

.route-dot {
  z-index: 16;
}

.terminal-entrance {
  z-index: 22;
}

@keyframes terminalRouteDraw {
  from { stroke-dashoffset: 92; }
  to { stroke-dashoffset: 0; }
}

@keyframes terminalRoutePulse {
  from { filter: drop-shadow(0 0 4px rgba(255, 77, 157, .72)); }
  to { filter: drop-shadow(0 0 9px rgba(255, 77, 157, 1)); }
}


/* Calm ICN quality pass: clearer hierarchy, gate cards, and indoor route intent */
body {
  background:
    radial-gradient(circle at 16% 4%, rgba(41, 122, 173, .13), transparent 30%),
    linear-gradient(135deg, #edf5fa 0%, #f8fbfd 46%, #e2edf5 100%);
}

.hero {
  min-height: 176px;
  background:
    linear-gradient(126deg, rgba(8, 31, 55, .96), rgba(35, 102, 145, .88)),
    linear-gradient(90deg, transparent, rgba(255,255,255,.06));
  box-shadow: 0 18px 44px rgba(16, 48, 78, .16);
}

.summary-card,
.terminal-card,
.terminal-map-panel,
.toolbar,
.debug-card {
  border-color: rgba(166, 189, 207, .52);
  box-shadow: 0 14px 34px rgba(25, 58, 88, .09);
}

.terminal-card {
  background: rgba(255,255,255,.975);
}

.gate-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gate-chip {
  min-height: 92px;
  padding: 12px;
  gap: 5px;
  border-color: #dce8f1;
  background: linear-gradient(180deg, #ffffff, #f7fbfe);
}

.gate-chip-kicker {
  color: #517094 !important;
  font-size: 11px !important;
  font-weight: 900;
}

.gate-chip strong {
  font-size: 16px;
  color: #102033;
}

.gate-chip-main {
  display: flex;
  gap: 6px;
  align-items: baseline;
  color: #102033 !important;
  font-weight: 900;
}

.gate-chip-main em {
  color: #657486;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.gate-chip-time {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid #e7eff6;
  color: #657486 !important;
  font-size: 12px !important;
  font-weight: 800;
}

.gate-chip.closed {
  background: linear-gradient(180deg, #f7f9fb, #eef3f7);
}

.terminal-route-svg {
  z-index: 17;
}

.terminal-hover-path {
  stroke-width: .9;
  stroke-dasharray: 8 5;
}

.terminal-hover-path.is-active {
  opacity: .96;
}

.terminal-hover-dot {
  z-index: 24;
}

.checkin-island {
  z-index: 12;
}

.checkin-letter,
.checkin-number,
.security-band {
  z-index: 18;
}

.gate-station {
  width: 170px;
  height: 106px;
}

.side-card {
  width: 72px;
  height: 66px;
  padding: 7px 8px;
  align-content: start;
}

.side-card.east {
  left: 100px;
  top: 2px;
}

.side-card.west {
  left: -2px;
  bottom: 2px;
}

.side-card small {
  display: inline-flex;
  width: fit-content;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef6fb;
  color: #2c6598;
}

.side-card strong {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.18;
}

.side-card em {
  display: block;
  margin-top: 1px;
  color: #69788b;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
}

.station-core {
  height: 82px;
  width: 40px;
}

.terminal-checkin-label {
  top: 47%;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
}

.terminal-note {
  max-width: min(620px, calc(100% - 250px));
}


/* Polished route line: soft guide rail with refined animated stroke */
.terminal-hover-rail {
  fill: none;
  stroke: rgba(255, 77, 157, .18);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255, 77, 157, .22));
  transition: opacity .28s ease;
}

.terminal-hover-rail.is-active {
  opacity: 1;
}

.terminal-hover-path {
  stroke: #f2388f !important;
  stroke-width: .62 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 96 !important;
  stroke-dashoffset: 0;
  marker-end: url(#terminalRouteArrow);
  opacity: 0;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, .85))
    drop-shadow(0 0 7px rgba(242, 56, 143, .72));
  transition: opacity .28s ease;
}

.terminal-hover-path.is-active {
  opacity: 1;
  animation: terminalElegantDraw 1.15s cubic-bezier(.24,.78,.28,1) forwards;
}

.terminal-hover-dot {
  background: radial-gradient(circle at 35% 35%, #ffffff 0 18%, #ff77b6 19% 44%, #f2388f 45% 100%) !important;
  border-color: rgba(242, 56, 143, .22) !important;
  box-shadow: 0 0 0 7px rgba(242, 56, 143, .10), 0 0 18px rgba(242, 56, 143, .38) !important;
}

@keyframes terminalElegantDraw {
  0% {
    stroke-dasharray: 1 96;
    stroke-dashoffset: 0;
  }
  55% {
    stroke-dasharray: 56 96;
    stroke-dashoffset: -14;
  }
  100% {
    stroke-dasharray: 96 0;
    stroke-dashoffset: -96;
  }
}


/* Layout polish: bring terminal map upward and improve calm ICN styling */
.app-shell {
  width: min(1280px, calc(100% - 32px));
}

body {
  background:
    linear-gradient(180deg, rgba(238, 247, 252, .88), rgba(248, 251, 253, .96) 42%, rgba(226, 238, 247, .88)),
    radial-gradient(circle at 82% 8%, rgba(23, 105, 170, .10), transparent 34%);
}

.hero {
  min-height: 168px;
  padding: 26px 30px;
  border: 1px solid rgba(196, 218, 232, .22);
  background:
    linear-gradient(122deg, rgba(7, 30, 54, .97), rgba(34, 99, 141, .90)),
    radial-gradient(circle at 86% 22%, rgba(255,255,255,.10), transparent 36%);
}

.hero::after {
  opacity: .42;
  height: 58px;
}

.toolbar {
  margin: 18px 0;
  padding: 14px 16px;
}

.summary-grid {
  gap: 14px;
}

.terminal-grid {
  gap: 14px;
  align-items: start;
}

.summary-card,
.terminal-card,
.terminal-map-panel,
.toolbar {
  border-color: rgba(183, 205, 221, .62);
  box-shadow: 0 10px 28px rgba(24, 55, 84, .075);
}

.terminal-card {
  padding: 18px;
}

.terminal-name {
  font-size: 23px;
  line-height: 1.25;
  word-break: keep-all;
}

.level {
  margin-top: 14px;
}

.level strong {
  font-size: 40px;
  letter-spacing: 0;
}

.meter {
  margin: 14px 0 14px;
}

.meta-grid {
  gap: 9px;
}

.meta-row {
  min-height: 64px;
  padding: 10px 11px;
}

.meta-row strong,
.meta-row span {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.gate-section {
  margin-top: 12px;
  padding-top: 12px;
}

.gate-section-title {
  margin-bottom: 9px;
}

.gate-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.gate-chip {
  min-height: 86px;
  padding: 10px;
  border-radius: 8px;
  align-content: start;
}

.gate-chip-kicker,
.gate-chip-main,
.gate-chip-time,
.gate-chip strong {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.26;
}

.gate-chip-main {
  display: block;
}

.gate-chip-main em {
  display: inline-block;
  margin-left: 3px;
}

.gate-chip-time {
  padding-top: 5px;
  line-height: 1.25;
}

.terminal-map-panel {
  margin-top: 12px;
  padding: 18px 20px 22px;
}

.section-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
}

.section-head h2 {
  font-size: 23px;
  line-height: 1.25;
}

.section-head p {
  max-width: 470px;
  line-height: 1.45;
  word-break: keep-all;
}

.terminal-canvas {
  height: clamp(540px, 42vw, 610px);
}

.terminal-note {
  max-width: min(680px, calc(100% - 230px));
  line-height: 1.35;
}

.terminal-note span {
  white-space: normal;
}

.side-card {
  width: 76px;
  min-height: 68px;
}

.side-card strong,
.side-card em {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .gate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .terminal-map-panel {
    margin-top: 10px;
  }

  .section-head p {
    border-radius: 8px;
  }
}


/* Inner terminal card text comfort */
.gate-station {
  width: 182px;
}

.side-card {
  width: 82px;
  min-height: 74px;
  padding: 8px 9px;
}

.side-card.east {
  left: 104px;
}

.side-card.west {
  left: -4px;
}

.side-card strong {
  font-size: 12px;
  line-height: 1.22;
}

.side-card em {
  font-size: 10px;
  line-height: 1.22;
  letter-spacing: 0;
}

.terminal-canvas .side-card {
  white-space: normal;
}


/* Route animation removed; counter positions resynced to T1 reference map */
.terminal-route-svg,
.terminal-hover-path,
.terminal-hover-rail,
.terminal-hover-dot,
.route-line,
.route-dot {
  display: none !important;
}

.terminal-checkin-label {
  top: 46%;
  background: rgba(255,255,255,.80);
}

.terminal-checkins {
  z-index: 16;
}

.checkin-island {
  width: 42px;
  height: 86px;
  transform: translate(-50%, -50%) rotate(var(--counter-rot, 0deg));
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 10%, rgba(47, 111, 208, .82) 0 4px, transparent 5px),
    repeating-linear-gradient(180deg, rgba(65, 79, 90, .30) 0 4px, transparent 4px 9px),
    linear-gradient(180deg, rgba(238, 241, 244, .96), rgba(218, 226, 232, .94));
  border: 1px solid rgba(151, 166, 178, .24);
  box-shadow: 0 12px 22px rgba(35, 64, 92, .10), inset 0 1px 0 rgba(255,255,255,.92);
}

.checkin-letter {
  width: 30px;
  height: 30px;
  background: linear-gradient(180deg, #2f71d3, #1d55b6);
  box-shadow: 0 8px 16px rgba(27, 75, 142, .18), inset 0 1px 0 rgba(255,255,255,.30);
}

.checkin-number {
  width: 36px;
  height: 31px;
  transform: translate(-50%, -50%) rotate(var(--counter-rot, 0deg));
  background: linear-gradient(180deg, #58b6d0, #2388a7);
  box-shadow: 0 9px 16px rgba(32, 110, 135, .18), inset 0 1px 0 rgba(255,255,255,.32);
}

.security-band {
  left: 11.3%;
  right: 11.3%;
  top: 68%;
  opacity: .72;
}

.security-band span {
  width: 28px;
  height: 28px;
  background: linear-gradient(180deg, #a7b0bb, #858f9a);
}

.terminal-entrance {
  bottom: 4.5%;
}


/* Final relayout: terminal map immediately below summary and synced check-in counters */
.terminal-map-panel {
  margin-top: 14px !important;
  margin-bottom: 16px;
}

.terminal-grid {
  margin-top: 0;
}

.terminal-canvas {
  height: clamp(610px, 46vw, 700px) !important;
}

.terminal-concourse {
  left: 2.2% !important;
  right: 2.2% !important;
  top: 11.5% !important;
  height: 55% !important;
}

.terminal-deck {
  left: 7% !important;
  right: 7% !important;
  top: 42% !important;
  height: 32% !important;
}

.terminal-inner-arc {
  left: 12% !important;
  right: 12% !important;
  top: 62% !important;
}

.terminal-checkin-label {
  top: 43.5% !important;
}

.checkin-island {
  width: 44px !important;
  height: 96px !important;
  transform: translate(-50%, -50%) rotate(var(--counter-rot, 0deg)) !important;
  background:
    radial-gradient(circle at 54% 9%, rgba(47, 111, 208, .95) 0 4px, transparent 5px),
    repeating-linear-gradient(180deg, rgba(60, 73, 84, .34) 0 4px, transparent 4px 9px),
    linear-gradient(180deg, #f3f5f7, #dce5eb) !important;
}

.checkin-letter {
  width: 31px !important;
  height: 31px !important;
  z-index: 24 !important;
}

.checkin-number {
  width: 38px !important;
  height: 32px !important;
  transform: translate(-50%, -50%) rotate(var(--counter-rot, 0deg)) !important;
  z-index: 24 !important;
}

.security-band {
  left: 8.5% !important;
  right: 8.5% !important;
  top: 70.5% !important;
  opacity: .78 !important;
}

.gate-station {
  min-height: 122px;
}

.side-card {
  min-height: 82px !important;
  width: 88px !important;
}

.side-card.east {
  left: 108px !important;
}

.side-card.west {
  left: -8px !important;
}

.hero {
  background:
    linear-gradient(122deg, rgba(7, 30, 54, .97), rgba(34, 99, 141, .90)),
    radial-gradient(circle at 72% 22%, rgba(196, 232, 255, .18), transparent 25%) !important;
}

.hero::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: 6px;
  width: 620px;
  height: 118px;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.12) 10% 12%, transparent 12% 19%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 34px, transparent 34px 60px);
  transform: skewX(-18deg);
  opacity: .46;
  pointer-events: none;
}

.hero-panel {
  position: relative;
  z-index: 1;
}

@keyframes gateFloat {
  0%, 100% { margin-top: 0; transform: translateZ(0); }
  50% { margin-top: -2px; transform: translateZ(0); }
}

@keyframes stationFloat {
  0%, 100% { margin-top: 0; transform: translate(-50%, -50%) translateZ(0); }
  50% { margin-top: -2px; transform: translate(-50%, -50%) translateZ(0); }
}



/* Status accuracy and ICN whole-airport 3D overview */
.summary-grid {
  grid-template-columns: 1.05fr 1.35fr 1fr 1fr;
  align-items: stretch;
}

.summary-card small {
  display: block;
  margin-top: 6px;
  color: #6a788a;
  font-size: 12px;
  font-weight: 800;
}

.summary-card .summary-time {
  font-size: 18px;
  line-height: 1.35;
  word-break: keep-all;
}

.summary-card {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.summary-card.status-live {
  border-color: rgba(28, 155, 100, .38);
  background: linear-gradient(180deg, #ffffff, #f2fbf7);
}

.summary-card.status-history {
  border-color: rgba(217, 136, 6, .42);
  background: linear-gradient(180deg, #ffffff, #fff8ea);
}

.summary-card.status-delay {
  border-color: rgba(217, 136, 6, .34);
}

.summary-card.status-stale,
.summary-card.status-error {
  border-color: rgba(194, 65, 45, .40);
  background: linear-gradient(180deg, #ffffff, #fff4f2);
}

.status-pill.status-live {
  background: #eaf8f1;
  color: #157a4f;
}

.status-pill.status-history {
  background: #fff4d8;
  color: #9a6200;
}

.status-pill.status-delay {
  background: #fff6df;
  color: #9a6200;
}

.status-pill.status-stale,
.status-pill.status-error {
  background: #fff0ed;
  color: #a93323;
}

.airport-overview-panel {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid rgba(183, 205, 221, .62);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,253,.96)),
    radial-gradient(circle at 78% 12%, rgba(23,105,170,.10), transparent 34%);
  box-shadow: 0 12px 32px rgba(24, 55, 84, .09);
}

.overview-copy {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 14px;
}

.overview-copy span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.overview-copy h2 {
  margin: 4px 0 0;
  font-size: 25px;
  letter-spacing: 0;
}

.overview-copy p {
  max-width: 520px;
  color: #617083;
  font-size: 14px;
  line-height: 1.55;
  word-break: keep-all;
}

.icn-3d-map {
  position: relative;
  height: 460px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #dce8f1;
  background:
    radial-gradient(circle at 50% 30%, rgba(159, 201, 222, .24), transparent 48%),
    linear-gradient(180deg, #eaf5fb, #f8fbfd 48%, #dcecf5);
  perspective: 1200px;
}

.icn-3d-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(23,105,170,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,105,170,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 86%);
}

.icn-world {
  position: absolute;
  left: 4%;
  right: 4%;
  top: -16px;
  height: 520px;
  transform: rotateX(54deg) rotateZ(-7deg);
  transform-style: preserve-3d;
  border-radius: 44% 56% 36% 40%;
  background:
    radial-gradient(ellipse at 52% 48%, rgba(255,255,255,.84) 0 26%, transparent 27%),
    linear-gradient(120deg, rgba(213,235,243,.72), rgba(239,247,251,.88));
  box-shadow: inset 0 0 0 1px rgba(129, 166, 188, .20), 0 44px 70px rgba(31,74,105,.15);
}

.runway,
.rail-line,
.airport-road,
.connector,
.terminal-model,
.transport-center,
.parking-lot,
.map-pin {
  position: absolute;
  display: block;
}

.runway {
  width: 520px;
  height: 18px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.82) 0 24px, transparent 24px 48px),
    linear-gradient(180deg, #7f96a7, #657b8d);
  box-shadow: 0 10px 0 rgba(72, 93, 109, .25);
  opacity: .68;
}

.runway-a { left: 1%; top: 66px; transform: rotate(-16deg); }
.runway-b { left: 32%; top: 48px; transform: rotate(-16deg); }
.runway-c { right: -2%; top: 120px; transform: rotate(-16deg); }

.rail-line {
  left: 15%;
  right: 12%;
  bottom: 72px;
  height: 8px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, #244968 0 18px, #d9e8f1 18px 25px),
    #244968;
  transform: rotate(-5deg);
  box-shadow: 0 5px 0 rgba(20,46,68,.16);
}

.airport-road {
  height: 6px;
  border-radius: 999px;
  background: rgba(78, 121, 152, .46);
  box-shadow: 0 4px 0 rgba(78, 121, 152, .14);
}

.road-main { left: 12%; right: 8%; top: 342px; transform: rotate(-7deg); }
.road-branch-a { left: 20%; width: 250px; top: 300px; transform: rotate(-28deg); }
.road-branch-b { right: 18%; width: 260px; top: 292px; transform: rotate(22deg); }

.terminal-model {
  height: 54px;
  transform-style: preserve-3d;
  background: linear-gradient(180deg, #f9fdff, #cbdde8);
  border: 1px solid rgba(116, 151, 176, .28);
  box-shadow: 0 18px 0 #9bb5c5, 0 28px 34px rgba(31, 74, 105, .18);
}

.terminal-model::before {
  content: "";
  position: absolute;
  inset: 7px 14px;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, rgba(23,105,170,.24) 0 10px, transparent 10px 24px);
  opacity: .72;
}

.terminal-model b,
.transport-center b,
.parking-lot b,
.map-pin {
  color: #102033;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.terminal-model b {
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%) rotateX(-54deg) rotateZ(7deg);
}

.terminal-model i {
  position: absolute;
  inset: -9px 10%;
  border-radius: inherit;
  border-top: 3px solid rgba(23,105,170,.36);
}

.terminal-one {
  left: 16%;
  top: 236px;
  width: 350px;
  border-radius: 46% 54% 18px 18px / 86% 86% 18px 18px;
  transform: rotate(-9deg);
}

.concourse {
  left: 39%;
  top: 172px;
  width: 300px;
  height: 42px;
  border-radius: 999px;
  transform: rotate(-6deg);
}

.terminal-two {
  right: 10%;
  top: 210px;
  width: 330px;
  border-radius: 999px 999px 20px 20px;
  transform: rotate(10deg);
}

.connector {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,105,170,.18), rgba(23,105,170,.72));
  box-shadow: 0 4px 0 rgba(23,105,170,.10);
}

.connector-t1-concourse { left: 35%; top: 224px; width: 150px; transform: rotate(-25deg); }
.connector-concourse-t2 { left: 58%; top: 203px; width: 190px; transform: rotate(14deg); }

.transport-center {
  width: 132px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(180deg, #dcecf6, #aac5d6);
  border: 1px solid rgba(96, 135, 164, .30);
  box-shadow: 0 13px 0 #88a9bd, 0 22px 24px rgba(31,74,105,.14);
}

.transport-center b,
.parking-lot b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateX(-54deg) rotateZ(7deg);
}

.t1-transport { left: 20%; top: 324px; transform: rotate(-9deg); }
.t2-transport { right: 18%; top: 315px; transform: rotate(10deg); }

.parking-lot {
  width: 170px;
  height: 70px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.56) 0 4px, transparent 4px 17px),
    linear-gradient(180deg, #c8d8e3, #9fb8ca);
  border: 1px solid rgba(98, 128, 150, .22);
  box-shadow: 0 10px 0 rgba(118, 148, 170, .45);
}

.parking-t1 { left: 7%; top: 358px; transform: rotate(-8deg); }
.parking-t2 { right: 4%; top: 352px; transform: rotate(11deg); }

.map-pin {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(23,105,170,.18);
  box-shadow: 0 12px 22px rgba(31,74,105,.12);
  transform: rotateX(-54deg) rotateZ(7deg);
  animation: overviewPin 2.4s ease-in-out infinite;
}

.pin-t1 { left: 24%; top: 180px; }
.pin-t2 { right: 20%; top: 156px; animation-delay: .45s; }

@keyframes overviewPin {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -4px; }
}

@media (max-width: 1100px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-copy { display: block; }
  .overview-copy p { margin-top: 8px; }
  .icn-3d-map { height: 420px; }
}

@media (max-width: 640px) {
  .summary-grid { grid-template-columns: 1fr; }
  .icn-3d-map { overflow-x: auto; }
  .icn-world { min-width: 960px; }
}


.status-pill.status-loading {
  background: #eef7ff;
  color: var(--blue);
}


/* T1 real-image map overlay: background image + SVG route + absolute markers */
.airport-overview-panel {
  display: none !important;
}

.terminal-map-panel {
  margin-top: 14px !important;
}

.terminal-render {
  min-height: auto;
}

.t1-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 14px;
  align-items: stretch;
}

.t1-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #d8e5ef;
  border-radius: 8px;
  background: #f7fbfe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 32px rgba(24,55,84,.08);
}

.t1-map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

.t1-map-missing {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: #617083;
  background:
    radial-gradient(circle at 50% 28%, rgba(23,105,170,.10), transparent 34%),
    linear-gradient(180deg, #f7fbfe, #edf5fa);
}

.t1-map-missing strong {
  color: #102033;
  font-size: 20px;
}

.t1-map-frame:not(.is-missing-image) .t1-map-missing {
  display: none;
}

.t1-route-overlay,
.t1-marker-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.t1-route-overlay {
  z-index: 3;
  pointer-events: none;
}

.t1-route-glow {
  fill: none;
  stroke: rgba(233, 30, 99, .20);
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.t1-route-path {
  fill: none;
  stroke: #e91e63;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18 15;
  filter: drop-shadow(0 0 5px rgba(233, 30, 99, .55));
  animation: t1RouteDraw 1.15s ease-in-out both, t1DashMove 1.2s linear infinite;
}

.t1-marker-layer {
  z-index: 4;
}

.t1-marker {
  position: absolute;
  min-width: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.88);
  color: white;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(11, 34, 58, .18);
  z-index: 2;
}

.t1-marker span {
  line-height: 1;
}

.t1-marker em {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  min-width: max-content;
  max-width: 180px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(10, 22, 40, .88);
  color: white;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.t1-marker:hover em,
.t1-marker.is-active em {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

.t1-marker.entrance { background: linear-gradient(180deg, #58b5d0, #2388a7); }
.t1-marker.counter { background: linear-gradient(180deg, #2f71d3, #1d55b6); }
.t1-marker.departure {
  width: 38px;
  height: 50px;
  border-radius: 9px;
  background: linear-gradient(180deg, #4b3fa0, #241b68);
  color: #f6ec3f;
  font-size: 18px;
}
.t1-marker.security {
  width: auto;
  min-width: 58px;
  height: 28px;
  border-radius: 999px;
  padding: 0 8px;
  background: linear-gradient(180deg, #f8fbfe, #dceaf4);
  color: #174c8c;
  border-color: rgba(23,76,140,.20);
}

.t1-marker.is-active {
  outline: 4px solid rgba(244,197,66,.38);
  outline-offset: 3px;
}

.t1-info-panel {
  padding: 15px;
  border: 1px solid #d8e5ef;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f6fbfe);
  box-shadow: 0 12px 24px rgba(24,55,84,.07);
}

.t1-info-panel span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.t1-info-panel strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
}

.t1-info-panel p {
  margin-top: 10px;
  color: #617083;
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;
}

.t1-info-panel dl {
  margin: 14px 0 0;
  display: grid;
  gap: 8px;
}

.t1-info-panel div {
  padding: 9px 10px;
  border: 1px solid #e5eef5;
  border-radius: 8px;
  background: #fbfdff;
}

.t1-info-panel dt {
  color: #617083;
  font-size: 12px;
  font-weight: 800;
}

.t1-info-panel dd {
  margin: 3px 0 0;
  font-weight: 900;
}

.t1-map-status {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #d8e5ef;
  border-radius: 8px;
  background: #fbfdff;
  color: #617083;
  font-size: 13px;
}

.t1-map-status strong {
  color: var(--blue);
}

.t1-map-status span {
  color: #102033;
  font-weight: 900;
}

.t1-map-status em {
  margin-left: auto;
  font-style: normal;
}

@keyframes t1RouteDraw {
  from { stroke-dashoffset: 280; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes t1DashMove {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -66; }
}

@media (prefers-reduced-motion: reduce) {
  .t1-route-path {
    animation: none !important;
  }
}

@media (max-width: 980px) {
  .t1-map-layout {
    grid-template-columns: 1fr;
  }

  .t1-map-status {
    display: grid;
  }

  .t1-map-status em {
    margin-left: 0;
  }
}


/* Sync T1 overlay to 1272x589 source image */
.t1-map-frame {
  aspect-ratio: 1272 / 589 !important;
}

.t1-marker {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.t1-marker.departure {
  width: 36px;
  height: 54px;
  border-radius: 8px;
  font-size: 20px;
}

.t1-marker.counter {
  width: 28px;
  height: 28px;
}

.t1-marker.security {
  min-width: 64px;
  height: 27px;
  font-size: 11px;
  opacity: .92;
}

.t1-route-path {
  stroke-width: 5.5;
  stroke-dasharray: 14 12;
}

.t1-route-glow {
  stroke-width: 13;
}


/* Full source T1 map sync: 1672x941 */
.t1-map-frame {
  aspect-ratio: 1672 / 941 !important;
}

.t1-marker {
  width: 30px !important;
  height: 30px !important;
  font-size: 12px !important;
}

.t1-marker.departure {
  width: 40px !important;
  height: 58px !important;
  font-size: 21px !important;
}

.t1-marker.security {
  min-width: 68px !important;
  height: 28px !important;
  font-size: 11px !important;
}


/* Image-rendered overlay sync and natural integrated marker styling */
.t1-map-frame {
  background: #ffffff !important;
}

.t1-map-image {
  object-fit: contain !important;
}

.t1-route-overlay,
.t1-marker-layer {
  inset: auto !important;
  pointer-events: none;
  overflow: visible;
}

.t1-route-overlay {
  z-index: 3;
}

.t1-marker-layer {
  z-index: 4;
}

.t1-route-white {
  fill: none;
  stroke: rgba(255, 255, 255, .88);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .86;
}

.t1-route-glow {
  stroke: rgba(233, 30, 99, .18) !important;
  stroke-width: 8 !important;
  filter: none !important;
}

.t1-route-path {
  stroke: #e91e63 !important;
  stroke-width: 5.2 !important;
  stroke-dasharray: 14 14 !important;
  opacity: .90;
  filter: drop-shadow(0 1px 2px rgba(255,255,255,.78)) !important;
}

.t1-marker {
  width: 48px !important;
  height: 48px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) !important;
}

.t1-marker span {
  display: none !important;
}

.t1-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  opacity: .28;
}

.t1-marker:hover::before,
.t1-marker.is-active::before {
  width: 34px;
  height: 34px;
  border: 4px solid rgba(245, 200, 75, .88);
  background: rgba(245, 200, 75, .10);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(233,30,99,.30));
}

.t1-marker.departure:hover::before,
.t1-marker.departure.is-active::before {
  width: 42px;
  height: 58px;
  border-radius: 10px;
}

.t1-marker em {
  min-width: max-content;
  max-width: 220px;
  padding: 6px 10px !important;
  border: 1px solid rgba(80,120,180,.35);
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  color: #1f3f7a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  backdrop-filter: blur(4px);
}

.t1-marker:hover em,
.t1-marker.is-active em {
  opacity: 1;
}

.terminal-grid {
  align-items: stretch;
}

.terminal-card {
  min-width: 0;
}

.terminal-card .meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.terminal-card .meta-row {
  min-height: 76px;
}

.terminal-card .meta-row strong,
.terminal-card .meta-row span,
.gate-chip,
.gate-chip * {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.32;
}

.gate-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.gate-chip {
  min-height: 104px !important;
}

@media (max-width: 1100px) {
  .terminal-card .meta-grid {
    grid-template-columns: 1fr;
  }
}


/* Final visibility and T1 map label polish */
.terminal-card {
  background: #ffffff !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.terminal-card .meta-grid {
  grid-template-columns: repeat(2, minmax(250px, 1fr)) !important;
  gap: 12px !important;
}

.terminal-card .meta-row {
  min-height: 88px !important;
  padding: 13px 14px !important;
  background: #f8fbff !important;
  overflow: visible !important;
}

.terminal-card .meta-row strong,
.terminal-card .meta-row span,
.map-link {
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-height: 1.36 !important;
}

.meta-row .map-link,
.map-link {
  display: inline !important;
  text-align: left !important;
  padding: 0 !important;
  max-width: 100% !important;
}

.gate-grid {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)) !important;
  gap: 11px !important;
}

.gate-chip {
  min-height: 128px !important;
  padding: 14px !important;
  background: #ffffff !important;
  opacity: 1 !important;
  overflow: visible !important;
  align-content: start !important;
}

.gate-chip strong {
  font-size: 16px !important;
  line-height: 1.28 !important;
}

.gate-chip-kicker,
.gate-chip-main,
.gate-chip-time,
.gate-chip strong {
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

.gate-chip-main {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 5px 7px !important;
  line-height: 1.3 !important;
}

.gate-chip-time {
  line-height: 1.36 !important;
  margin-top: 4px !important;
}


/* Flight carousel replaces old route selection panel */
.t1-map-layout {
  grid-template-columns: minmax(0, 1fr) 320px !important;
  align-items: stretch !important;
}

.flight-carousel-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid #dbe7f1;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(28, 57, 90, .08);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
}

.flight-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.flight-carousel-head .flight-kicker {
  display: inline-flex;
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eaf4ff;
  color: #235a91;
  font-size: 11px;
  font-weight: 900;
}

.flight-carousel-head strong {
  display: block;
  margin-top: 7px;
  color: #102033;
  font-size: 17px;
  line-height: 1.25;
  word-break: keep-all;
}

.flight-carousel-head em {
  display: block;
  margin-top: 4px;
  color: #6b7c8e;
  font-size: 11px;
  font-style: normal;
}

.flight-slide-window {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 0;
  overflow: hidden;
}

.flight-slide {
  border: 1px solid #e2edf5;
  border-left: 4px solid #4c8fc9;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 12px;
  box-shadow: 0 6px 16px rgba(30, 66, 100, .06);
  animation: flightCardIn .32s ease both;
}

.flight-slide.is-delay { border-left-color: #d8921f; }
.flight-slide.is-cancel { border-left-color: #c94b3d; }
.flight-slide.is-boarding { border-left-color: #4b9964; }

.flight-slide-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.flight-slide-top span {
  color: #5d6f82;
  font-size: 12px;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flight-slide-top strong {
  color: #0d2037;
  font-size: 18px;
  white-space: nowrap;
}

.flight-destination {
  margin-top: 5px;
  color: #17395f;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  word-break: keep-all;
}

.flight-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
}

.flight-facts div {
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: #f1f6fb;
}

.flight-facts dt {
  color: #6b7c8e;
  font-size: 11px;
  font-weight: 900;
}

.flight-facts dd {
  margin: 3px 0 0;
  color: #102033;
  font-size: 14px;
  font-weight: 900;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.flight-status {
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #edf6ef;
  color: #2d7246;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.flight-slide.is-delay .flight-status { background: #fff5dc; color: #9a6612; }
.flight-slide.is-cancel .flight-status { background: #fff0ee; color: #b33c31; }
.flight-slide.empty-flight {
  border-left-color: #8aa3b8;
  min-height: 180px;
  display: grid;
  align-content: center;
  gap: 8px;
}
.flight-slide.empty-flight p {
  margin: 0;
  color: #617083;
  line-height: 1.45;
  word-break: keep-all;
}

.flight-carousel-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.flight-carousel-controls button {
  border: 1px solid #cfe0ec;
  border-radius: 8px;
  background: #f7fbff;
  color: #234d75;
  font-weight: 900;
  padding: 9px 10px;
  cursor: pointer;
}

.flight-carousel-controls button:disabled {
  opacity: .45;
  cursor: default;
}

.flight-carousel-controls span {
  color: #607184;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.flight-lock-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid #d7e4ef;
  border-radius: 999px;
  background: #ffffff;
  color: #41566c;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.flight-lock-toggle input {
  width: 14px;
  height: 14px;
  accent-color: #236091;
}

@keyframes flightCardIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Gate cards should be fully visible and contain operating time/counts naturally */
.terminal-card,
.gate-section,
.gate-grid,
.gate-chip,
.gate-chip.closed {
  opacity: 1 !important;
  visibility: visible !important;
}

.gate-section {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid #dfeaf3 !important;
  overflow: visible !important;
}

.gate-grid {
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
}

.gate-chip {
  min-height: 146px !important;
  padding: 15px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid #dfeaf3 !important;
  box-shadow: 0 8px 20px rgba(23, 57, 95, .055) !important;
  display: grid !important;
  gap: 7px !important;
  align-content: start !important;
}

.gate-chip.closed {
  background: #f6f9fc !important;
  filter: none !important;
}

.gate-chip-main {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
}

.gate-chip-main b,
.gate-chip-main em,
.gate-chip-time {
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
}

.gate-chip-main b {
  color: #17243a;
  font-size: 15px;
}

.gate-chip-main em {
  margin: 0 !important;
  color: #4f6278 !important;
  font-size: 14px !important;
  font-style: normal;
}

.gate-chip-time {
  color: #52667d !important;
  font-size: 13px !important;
}

@media (max-width: 980px) {
  .t1-map-layout {
    grid-template-columns: 1fr !important;
  }

  .flight-carousel-panel {
    min-height: 320px;
  }
}


/* Clean T1 map and polished flight-board cards */
.t1-route-overlay,
.t1-marker-layer,
.t1-map-status {
  display: none !important;
}

.t1-map-status {
  display: flex !important;
}

.t1-map-layout {
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.t1-map-frame {
  border-radius: 10px !important;
  border: 1px solid #d8e5ef !important;
  background: #fff !important;
  overflow: hidden !important;
}

.flight-carousel-panel {
  padding: 16px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid #d8e5ef !important;
  box-shadow: 0 12px 26px rgba(28, 57, 90, .08) !important;
}

.flight-slide-window {
  gap: 11px !important;
}

.flight-slide {
  padding: 13px !important;
  border-radius: 9px !important;
  border: 1px solid #e0eaf3 !important;
  border-left: 5px solid #4c8fc9 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(23, 57, 95, .07) !important;
}

.flight-airline-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.airline-logo {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #17395f, #367ab7);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 6px 14px rgba(24, 62, 98, .18);
}

.airline-meta {
  min-width: 0;
}

.airline-meta strong {
  display: block;
  color: #102033;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.airline-meta em {
  display: block;
  margin-top: 2px;
  color: #5d6f82;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.flight-route {
  margin-top: 8px;
  padding: 8px 9px;
  border-radius: 8px;
  background: #f4f8fc;
  color: #102b4d;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.25;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.flight-facts {
  margin-top: 10px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.flight-facts div {
  background: #f8fbfe !important;
  border: 1px solid #e7eff6;
  padding: 8px 9px !important;
}

.flight-facts dt {
  color: #687b90 !important;
  font-size: 10px !important;
}

.flight-facts dd {
  color: #102033 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.flight-facts .flight-recommend {
  grid-column: 1 / -1;
  border-color: rgba(28, 155, 100, .24);
  background: linear-gradient(180deg, #f6fcf8, #ffffff) !important;
}

.flight-facts .flight-recommend dd {
  color: #127349 !important;
  font-weight: 950;
}

.flight-status {
  margin-top: 0 !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background: #eaf4ff !important;
  color: #236091 !important;
  border: 1px solid rgba(35, 96, 145, .18);
  white-space: nowrap;
  font-size: 11px !important;
}

.flight-slide.is-normal { border-left-color: #4c8fc9 !important; }
.flight-slide.is-normal .flight-status { background: #eaf4ff !important; color: #236091 !important; }
.flight-slide.is-ready { border-left-color: #5b7fd6 !important; }
.flight-slide.is-ready .flight-status { background: #eef3ff !important; color: #395db5 !important; }
.flight-slide.is-boarding { border-left-color: #3f9f62 !important; }
.flight-slide.is-boarding .flight-status { background: #eaf8ef !important; color: #267a42 !important; }
.flight-slide.is-departed { border-left-color: #8796a8 !important; }
.flight-slide.is-departed .flight-status { background: #f0f4f7 !important; color: #536273 !important; }
.flight-slide.is-delay { border-left-color: #d98a18 !important; }
.flight-slide.is-delay .flight-status { background: #fff4dd !important; color: #95600f !important; }
.flight-slide.is-cancel { border-left-color: #c8493d !important; }
.flight-slide.is-cancel .flight-status { background: #fff0ee !important; color: #b33c31 !important; }
.flight-slide.is-closed { border-left-color: #6b7280 !important; }
.flight-slide.is-closed .flight-status { background: #f1f3f5 !important; color: #4b5563 !important; }

.flight-carousel-controls button {
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.flight-carousel-controls button:not(:disabled):hover {
  background: #eaf4ff !important;
  border-color: #9fc6e2 !important;
  transform: translateY(-1px);
}

.airline-logo-image {
  background: #ffffff !important;
  border: 1px solid #dde8f2 !important;
  overflow: hidden;
}

.airline-logo-image img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.airline-logo-image b {
  display: none;
  color: #17395f;
  font-size: 14px;
  font-weight: 950;
}

.airline-logo-image.is-fallback b {
  display: block;
}

.airline-logo-fallback {
  background: linear-gradient(135deg, #17395f, #367ab7) !important;
}

.departure-board-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 9px;
  margin-bottom: 12px;
}

.departure-board-head span {
  color: #5d6f82;
  font-size: 12px;
  font-weight: 900;
}

.departure-board-head strong {
  color: #102033;
  font-size: 14px;
  font-weight: 950;
}

.departure-board-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(128px, 1fr));
  gap: 10px;
}

.departure-station-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e0eaf3;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fbfe, #ffffff);
}

.departure-station-card.is-best {
  border-color: rgba(244, 197, 66, .75);
  box-shadow: 0 0 0 3px rgba(244, 197, 66, .18);
}

.departure-station-core {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.departure-station-core span {
  color: #5d6f82;
  font-size: 11px;
  font-weight: 900;
}

.departure-station-core strong {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #342982;
  color: #f6ec55;
  font-size: 18px;
  font-weight: 950;
}

.station-recommend,
.recommend-inline {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(28, 155, 100, .14);
  color: #127349 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1.2;
  white-space: nowrap;
}

.departure-station-sides {
  display: grid;
  gap: 8px;
}

.departure-gate-board .airport-side-card {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 62px !important;
  transform: none !important;
  text-align: left !important;
  cursor: pointer;
}

.departure-gate-board .airport-side-card:disabled {
  cursor: default;
  opacity: .55;
}

.departure-gate-board .airport-side-card strong {
  font-size: 11px;
}

.t1-departure-card-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.t1-mobile-gate-grid {
  display: none;
}

.t1-smart-pass-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 28px);
  padding: 7px 10px;
  border: 1px solid rgba(244, 197, 66, .75);
  border-radius: 999px;
  background: rgba(255, 250, 235, .96);
  box-shadow: 0 8px 18px rgba(20, 48, 82, .12);
  color: #102033;
  pointer-events: none;
}

.t1-smart-pass-overlay-img {
  width: 86px;
  flex: 0 0 auto;
}

.t1-smart-pass-overlay strong,
.t1-smart-pass-overlay em {
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.t1-smart-pass-overlay strong {
  font-weight: 950;
}

.t1-smart-pass-overlay em {
  color: #102033;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 720px) {
  .t1-smart-pass-overlay {
    top: 8px;
    right: 8px;
    gap: 5px;
    padding: 5px 7px;
    max-width: calc(100% - 16px);
  }

  .t1-smart-pass-overlay-img {
    width: 60px;
  }

  .t1-smart-pass-overlay strong,
  .t1-smart-pass-overlay em {
    font-size: 9px;
  }
}

.t1-departure-card-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 104px;
  pointer-events: auto;
}

.t1-departure-card-pin.station-1,
.t1-departure-card-pin.station-2,
.t1-departure-card-pin.station-3 {
  transform: translate(-45%, -52%);
}

.t1-departure-card-pin.station-4,
.t1-departure-card-pin.station-5,
.t1-departure-card-pin.station-6 {
  transform: translate(-55%, -52%);
}

.t1-departure-card-layer .departure-station-card {
  gap: 4px;
  padding: 6px;
  border-color: rgba(210, 225, 237, .82);
  border-radius: 7px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 7px 15px rgba(9, 31, 55, .15);
  backdrop-filter: blur(5px);
}

.t1-departure-card-layer .departure-station-core span {
  font-size: 9px;
}

.t1-departure-card-layer .departure-station-core strong {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  font-size: 12px;
}

.t1-departure-card-layer .departure-station-sides {
  gap: 3px;
}

.t1-departure-card-layer .airport-side-card {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 42px !important;
  padding: 5px 6px !important;
  transform: none !important;
  gap: 1px !important;
  border-radius: 6px !important;
}

.t1-departure-card-layer .airport-side-card span {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  font-size: 9px;
}

.t1-departure-card-layer .station-recommend,
.t1-departure-card-layer .recommend-inline {
  padding: 1px 4px;
  font-size: 7px !important;
}

.t1-departure-card-layer .airport-side-card strong {
  font-size: 11px;
  line-height: 1.05;
}

.airport-side-card b {
  color: #102033;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
}

.t1-departure-card-layer .airport-side-card em {
  display: block;
  font-size: 8px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t1-departure-card-layer .airport-side-card.is-smart-pass {
  min-height: 50px !important;
  background: linear-gradient(180deg, #fff5c8, #ffffff) !important;
}

.t1-departure-card-layer .airport-side-card.is-smart-pass span i {
  width: 30px;
  height: 13px;
  margin: 2px 0 0;
  padding: 0;
  font-size: 0;
}

.smart-pass-img {
  display: block;
  width: 76px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 2048 / 626;
  object-fit: contain;
}

.smart-pass-card-mark {
  width: 38px;
  flex: 0 0 auto;
}

.smart-pass-badge {
  width: 58px;
  margin-top: 4px;
}

.smart-pass-station-mark {
  width: 44px;
  flex: 0 0 auto;
}

.smart-pass-chip-img {
  width: 86px;
  flex: 0 0 auto;
}

.smart-pass-t2-card-img {
  width: 56px;
}

.t1-departure-card-layer .airport-side-card.is-smart-pass span i::before {
  content: "";
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  margin-right: 0;
  border-radius: 3px;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%) 2px 2px / 7px 7px no-repeat,
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%) 9px 2px / 7px 7px no-repeat,
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%) 16px 2px / 7px 7px no-repeat,
    linear-gradient(135deg, #f07a00, #ec6500);
}

.t1-departure-card-layer .departure-station-card:hover {
  transform: translateY(-2px);
}

.t1-marker.departure {
  opacity: .22;
}

@media (max-width: 1160px) {
  .departure-board-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .departure-board-head {
    display: grid;
    align-items: start;
  }

  .departure-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1160px) {
  .t1-map-layout {
    grid-template-columns: 1fr !important;
  }
}
.hero::before,
.hero::after {
  content: none !important;
  display: none !important;
}

.departure-station-card.is-best,
.terminal-gate.is-best,
.gate-station.is-best,
.airport-gate-node.is-best {
  border-color: rgba(28, 155, 100, .62) !important;
  box-shadow: 0 0 0 3px rgba(28, 155, 100, .16), 0 14px 30px rgba(17, 40, 65, .13) !important;
}

.terminal-gate.is-best::after,
.gate-station.is-best::after,
.airport-gate-node.is-best::after {
  background: var(--green) !important;
  color: #fff !important;
}

.smart-pass-panel {
  margin-top: 12px;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(226, 167, 0, .38);
  border-left: 5px solid #f4c542;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 241, 168, .95), rgba(255, 251, 236, .98));
  color: #17395f;
  position: relative;
  overflow: hidden;
}

.smart-pass-panel::before {
  content: "SMART PASS";
  position: absolute;
  right: 12px;
  top: 10px;
  color: rgba(118, 80, 0, .14);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .08em;
}

.smart-pass-sign-mini {
  width: 62px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #f07a00, #ec6500);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 4px 10px rgba(199, 87, 0, .22);
  position: relative;
  overflow: hidden;
}

.smart-pass-sign-mini::before {
  content: "";
  width: 32px;
  height: 14px;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%),
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%),
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%);
  background-size: 11px 14px;
  background-position: 0 0, 10px 0, 20px 0;
  background-repeat: no-repeat;
}

.smart-pass-panel strong {
  font-size: 14px;
  font-weight: 950;
}

.smart-pass-panel span {
  color: #4d6073;
  font-size: 13px;
  line-height: 1.45;
}

.departure-station-card.has-smart-pass {
  border-color: rgba(226, 167, 0, .44);
  background: linear-gradient(180deg, #fffdf4, #ffffff);
  box-shadow: 0 0 0 2px rgba(255, 199, 44, .12);
}

.departure-station-core em,
.airport-side-card span i,
.smart-pass-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe27a, #fff3bd);
  color: #765000;
  border: 1px solid rgba(226, 167, 0, .38);
  font-style: normal;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.departure-station-core .smart-pass-station-mark,
.airport-side-card span .smart-pass-card-mark,
.gate-chip .smart-pass-badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.departure-station-core em {
  padding: 4px 6px;
  min-height: 22px;
}

.departure-station-core em.smart-pass-station-mark {
  width: 42px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(135deg, #f07a00, #ec6500);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 3px 8px rgba(199, 87, 0, .18);
  font-size: 0;
  overflow: hidden;
  position: relative;
}

.departure-station-core em.smart-pass-station-mark::before {
  content: "";
  position: absolute;
  inset: 4px 6px;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%) 0 0 / 10px 10px no-repeat,
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%) 10px 0 / 10px 10px no-repeat,
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%) 20px 0 / 10px 10px no-repeat;
}

.smart-pass-badge::before {
  content: "";
  width: 34px;
  height: 14px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 4px;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%) 3px 3px / 9px 9px no-repeat,
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%) 12px 3px / 9px 9px no-repeat,
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%) 21px 3px / 9px 9px no-repeat,
    linear-gradient(135deg, #f07a00, #ec6500);
  vertical-align: middle;
}

.airport-side-card span i {
  margin-left: 4px;
  padding: 3px 5px;
  vertical-align: middle;
}

.smart-pass-badge {
  margin-top: 4px;
  padding: 4px 6px;
}

.airport-side-card span i.smart-pass-mark-only,
.smart-pass-badge.smart-pass-mark-only {
  width: 34px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(135deg, #f07a00, #ec6500);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 3px 8px rgba(199, 87, 0, .18);
  color: transparent;
  font-size: 0;
  overflow: hidden;
  position: relative;
}

.smart-pass-badge.smart-pass-mark-only {
  display: inline-block;
  margin-top: 4px;
}

.airport-side-card span i.smart-pass-mark-only::before,
.smart-pass-badge.smart-pass-mark-only::before {
  content: "";
  position: absolute;
  inset: 3px 4px;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background:
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%) 0 0 / 9px 9px no-repeat,
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%) 9px 0 / 9px 9px no-repeat,
    linear-gradient(135deg, transparent 0 42%, #fff 42% 68%, transparent 68%) 18px 0 / 9px 9px no-repeat;
}

.t1-smart-pass-legend {
  position: absolute;
  left: 58.5%;
  bottom: 15px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 138px;
  padding: 5px 8px;
  border: 1px solid rgba(206, 220, 232, .95);
  border-radius: 5px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 2px 8px rgba(36, 68, 96, .12);
}

.t1-smart-pass-legend .smart-pass-sign-mini {
  width: 44px;
  height: 17px;
  border-radius: 5px;
  box-shadow: none;
}

.t1-smart-pass-legend .smart-pass-sign-mini::before {
  width: 24px;
  height: 10px;
  background-size: 8px 10px;
  background-position: 0 0, 8px 0, 16px 0;
}

.t1-smart-pass-legend strong {
  display: grid;
  gap: 1px;
  color: #202a34;
  font-weight: 900;
  line-height: 1.08;
}

.t1-smart-pass-legend strong span,
.t1-smart-pass-legend strong em {
  color: inherit;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
}

.airport-side-card.is-smart-pass,
.gate-chip.is-smart-pass {
  border-color: rgba(226, 167, 0, .64) !important;
  background: linear-gradient(180deg, #fff9df, #ffffff) !important;
  box-shadow: 0 0 0 2px rgba(255, 199, 44, .2), 0 10px 22px rgba(17, 40, 65, .11) !important;
}

.airport-side-card.is-smart-pass::before,
.gate-chip.is-smart-pass::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: inherit;
  background: linear-gradient(180deg, #f4c542, #d79b00);
}

.gate-chip.is-smart-pass::after {
  content: none;
}

.airport-side-card span,
.gate-chip strong,
.smart-pass-panel span,
.summary-card small,
.flight-carousel-head strong,
.flight-kicker {
  white-space: normal !important;
  overflow-wrap: normal;
  word-break: keep-all;
  line-height: 1.32;
}

.airport-side-card span {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
}

.airport-side-card span i,
.smart-pass-badge {
  white-space: nowrap;
  text-align: center;
  max-width: 100%;
}

.gate-chip strong {
  display: grid;
  gap: 4px;
}

.departure-station-core .smart-pass-station-mark,
.airport-side-card span .smart-pass-card-mark,
.gate-chip .smart-pass-badge,
.t2-smart-pass-chip .smart-pass-chip-img,
.t2-gate-card .smart-pass-t2-card-img {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  overflow: visible;
}

.gate-chip strong .smart-pass-badge {
  width: 64px;
}

.t1-departure-card-layer .airport-side-card span .smart-pass-card-mark {
  width: 42px;
}

.t1-departure-card-layer .departure-station-core .smart-pass-station-mark {
  width: 46px;
}

.airport-side-card strong,
.airport-side-card b,
.airport-side-card em,
.gate-chip strong,
.gate-chip-main,
.gate-chip-time,
.t2-gate-card span,
.t2-gate-card strong,
.t2-gate-card b,
.t2-gate-card em,
.t2-gate-card small,
.meta-row strong,
.flight-card,
.flight-card * {
  word-break: keep-all;
  overflow-wrap: normal;
}

.t1-departure-card-layer .airport-side-card strong,
.t1-departure-card-layer .airport-side-card b,
.t1-departure-card-layer .airport-side-card em {
  white-space: nowrap;
}

.terminal-map-panel-t2 {
  margin-top: 16px !important;
}

.summary-card,
.terminal-card,
.terminal-map-panel,
.flight-carousel-panel,
.t2-forecast-summary,
.debug-card {
  border-color: rgba(199, 216, 229, .82) !important;
  box-shadow: 0 10px 24px rgba(24, 55, 84, .07) !important;
}

.summary-card,
.terminal-card {
  background: rgba(255, 255, 255, .98) !important;
}

.section-head h2,
.terminal-name,
.flight-carousel-title,
.terminal-map-panel h2 {
  letter-spacing: 0;
}

.terminal-card,
.summary-card,
.terminal-map-panel {
  border-radius: 10px !important;
}

.t2-map-layout {
  display: grid;
  position: relative;
}

.t2-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2.15 / 1;
  overflow: hidden;
  border: 1px solid #d8e5ef;
  border-radius: 10px;
  background: #fff;
}

.t2-map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.t2-forecast-summary {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(216, 229, 239, .92);
  border-radius: 10px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 26px rgba(20, 48, 82, .13);
  backdrop-filter: blur(8px);
}

.t2-forecast-summary span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eaf4ff;
  color: #1769aa;
  font-size: 12px;
  font-weight: 950;
}

.t2-forecast-summary strong {
  color: #102033;
  font-size: 28px;
  font-weight: 950;
}

.t2-forecast-summary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.t2-forecast-summary div {
  padding: 9px;
  border-radius: 8px;
  background: #f4f8fb;
}

.t2-forecast-summary dt {
  color: #5d6f82;
  font-size: 11px;
  font-weight: 900;
}

.t2-forecast-summary dd {
  margin: 4px 0 0;
  color: #102033;
  font-weight: 950;
}

.t2-smart-pass-chip {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(360px, calc(100% - 32px));
  padding: 9px 11px;
  border-radius: 999px;
  background: rgba(255, 249, 232, .95);
  border: 1px solid rgba(226, 167, 0, .4);
  box-shadow: 0 10px 22px rgba(20, 48, 82, .12);
}

.t2-smart-pass-chip strong {
  color: #765000;
  font-size: 13px;
  font-weight: 950;
}

.t2-smart-pass-chip em {
  color: #102033;
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
}

.t2-gate-card-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.t2-gate-card {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 88px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(216, 229, 239, .9);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 18px rgba(17, 40, 65, .12);
  backdrop-filter: blur(7px);
  pointer-events: auto;
}

.t2-gate-card span {
  color: #5d6f82;
  font-size: 9px;
  font-weight: 950;
}

.t2-gate-card strong {
  color: #342982;
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
}

.t2-gate-card b {
  color: #102033;
  font-size: 11px;
  font-weight: 950;
}

.t2-gate-card em,
.t2-gate-card small {
  color: #5d6f82;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.15;
}

.t2-gate-card.is-smart-pass {
  border-color: rgba(226, 167, 0, .54);
  border-left-color: #f4c542;
  background: linear-gradient(180deg, rgba(255, 249, 224, .96), rgba(255,255,255,.96));
}

.t2-gate-card i {
  display: grid;
  gap: 3px;
  margin-top: 1px;
  color: #765000;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.t2-gate-card .smart-pass-sign-mini {
  width: 52px;
  height: 20px;
}

.t2-recommend {
  width: fit-content;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(28, 155, 100, .14);
  color: #127349 !important;
  font-weight: 950 !important;
}

@media (max-width: 640px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    background: #f4f8fb;
  }

  .app-shell {
    width: calc(100% - 18px) !important;
    max-width: none !important;
    padding-top: 10px !important;
    padding-bottom: 24px !important;
  }

  .hero {
    min-height: auto !important;
    padding: 16px !important;
    gap: 14px !important;
    grid-template-columns: 1fr !important;
  }

  .hero h1 {
    font-size: 30px !important;
    line-height: 1.12 !important;
  }

  .hero-copy p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .hero-panel {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    padding: 12px !important;
  }

  .flight-code {
    height: 56px !important;
    font-size: 22px !important;
  }

  .toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
    margin: 14px 0 !important;
  }

  .toolbar .select-wrap,
  .forecast-control,
  .lang-control,
  .toolbar button,
  .status-pill {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .toolbar button,
  .status-pill {
    grid-column: auto;
    min-height: 48px !important;
    padding-inline: 8px !important;
    font-size: 15px !important;
  }

  select,
  input[type="date"],
  button,
  .timer-form input {
    min-height: 48px !important;
    font-size: 15px !important;
  }

  .timer-widget {
    padding: 16px !important;
    margin-bottom: 14px !important;
  }

  .timer-widget-head {
    display: block !important;
  }

  .timer-widget-head h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  .timer-widget-head p {
    margin-top: 8px !important;
    max-width: none !important;
    color: var(--muted) !important;
    text-align: left !important;
  }

  .timer-form {
    grid-template-columns: 1fr 1fr !important;
  }
  .timer-form button {
    grid-column: 1 / -1 !important;
  }

  .timer-breakdown {
    grid-template-columns: 1fr !important;
  }

  .timer-breakdown .timer-wide {
    grid-column: auto !important;
  }

  .timer-main strong {
    font-size: 23px !important;
    line-height: 1.25 !important;
  }

  .timer-action {
    display: grid !important;
    gap: 6px !important;
  }

  .timer-breakdown div {
    padding: 13px !important;
  }

  .timer-breakdown dd {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .summary-grid,
  .terminal-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .summary-card {
    min-height: 104px !important;
    padding: 16px !important;
  }

  .summary-card strong {
    font-size: 24px !important;
    overflow-wrap: anywhere;
  }

  .terminal-map-panel {
    margin-top: 10px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  .section-head {
    display: grid !important;
    gap: 10px !important;
  }

  .section-head h2 {
    font-size: 25px !important;
    line-height: 1.18 !important;
  }

  .section-head p {
    max-width: none !important;
    padding: 12px !important;
    border-radius: 8px !important;
    background: #f3f7fd !important;
    font-size: 14px !important;
  }

  .t1-map-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .t1-map-frame {
    aspect-ratio: 16 / 10 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .t1-departure-card-layer {
    display: none !important;
  }

  .t1-mobile-gate-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 12px;
  }

  .t1-mobile-gate-grid .departure-station-card {
    gap: 10px;
    padding: 12px;
    border-radius: 9px;
    box-shadow: 0 8px 18px rgba(17, 40, 65, .1);
  }

  .t1-mobile-gate-grid .departure-station-core span {
    font-size: 10px;
  }

  .t1-mobile-gate-grid .departure-station-core strong {
    width: 28px;
    height: 28px;
    font-size: 17px;
  }

  .t1-mobile-gate-grid .departure-station-sides {
    gap: 9px;
  }

  .t1-mobile-gate-grid .airport-side-card {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 104px !important;
    padding: 11px !important;
    gap: 4px !important;
    border-radius: 8px !important;
  }

  .t1-mobile-gate-grid .airport-side-card span,
  .t1-mobile-gate-grid .airport-side-card em {
    font-size: 10px !important;
  }

  .t1-mobile-gate-grid .airport-side-card strong {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  .t1-mobile-gate-grid .airport-side-card b {
    font-size: 13px !important;
  }

  .t1-mobile-gate-grid .smart-pass-card-mark,
  .t1-mobile-gate-grid .smart-pass-station-mark {
    width: 58px !important;
  }

  .flight-carousel-panel {
    width: 100% !important;
    min-height: auto !important;
    padding: 14px !important;
  }

  .flight-slide-window {
    display: grid !important;
    gap: 10px !important;
  }

  .flight-slide {
    min-width: 0 !important;
    padding: 14px !important;
  }

  .flight-airline-row {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .flight-status {
    grid-column: 1 / -1;
    width: fit-content;
    margin-top: 2px !important;
  }

  .flight-route {
    font-size: 22px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }

  .flight-facts {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .flight-facts div {
    padding: 11px !important;
  }

  .flight-facts dt {
    font-size: 11px !important;
  }

  .flight-facts dd {
    font-size: 15px !important;
    line-height: 1.28 !important;
  }

  .flight-facts .flight-recommend {
    grid-column: 1 / -1 !important;
  }

  .terminal-card {
    padding: 16px !important;
    overflow: visible !important;
  }

  .terminal-name {
    font-size: 22px !important;
  }

  .level strong {
    font-size: 34px !important;
  }

  .gate-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .gate-chip {
    min-height: 154px !important;
    padding: 15px !important;
  }

  .departure-board-grid {
    grid-template-columns: 1fr !important;
  }

  .smart-pass-panel {
    margin-top: 10px;
    padding: 11px 12px;
  }

  .t2-map-frame {
    aspect-ratio: 2.15 / 1 !important;
  }

  .t2-smart-pass-chip {
    left: 12px;
    right: 12px;
    top: 12px;
    border-radius: 10px;
  }

  .t2-gate-card-layer {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 0 0;
    background: transparent;
    pointer-events: auto;
  }

  .t2-gate-card {
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none;
    width: auto;
    min-height: 118px;
    padding: 11px;
    gap: 4px;
    box-shadow: 0 8px 18px rgba(17, 40, 65, .1);
  }

  .t2-gate-card strong {
    font-size: 22px;
  }

  .t2-gate-card b {
    font-size: 13px !important;
  }

  .t2-gate-card span,
  .t2-gate-card em,
  .t2-gate-card small {
    font-size: 10px;
    line-height: 1.25;
  }

  .t2-gate-card .smart-pass-t2-card-img {
    width: 72px;
  }

  .t2-forecast-summary dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}