/*
 * F-C2/C3 관람객 라이브 정보(주차·혼잡) — 자체 스타일(kx 토큰만, 하드코딩 0). 공유 css 무수정.
 * Nifty: 카드(서브틀 그림자·라운드)·중립 팔레트·상태색 토큰.
 */
.kxl {
  max-width: var(--kxp-maxw, 1120px);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}
.kxl-hero {
  margin-bottom: var(--space-5);
}
.kxl-hero h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-900);
  margin: 0 0 var(--space-1);
}
.kxl-hero p {
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  margin: 0;
}
.kxl-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-4);
}
@media (max-width: 860px) {
  .kxl-grid { grid-template-columns: 1fr; }
}

.kx-card.kxl-cong,
.kx-card.kxl-parking {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.kxl-cong__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.kxl-sec__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-900);
  margin: 0;
}
.kxl-sec__title--sm { font-size: var(--fs-body); }

.kxl-overall,
.kxl-badge {
  font-size: var(--fs-nano);
  font-weight: var(--fw-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.is-free { background: var(--color-success-bg); color: var(--color-success); }
.is-normal { background: var(--color-warning-bg); color: var(--color-warning); }
.is-busy { background: var(--color-error-bg); color: var(--color-error); }

.kxl-cong__onsite {
  font-size: var(--fs-caption);
  color: var(--color-neutral-700);
  margin: 0;
}
.kxl-cong__onsite b { color: var(--color-primary-700); font-weight: var(--fw-bold); }

.kxl-cong__row {
  display: grid;
  gap: var(--space-1);
}
.kxl-cong__row-label {
  font-size: var(--fs-nano);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kxl-cong__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.kxl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-050);
  color: var(--color-neutral-700);
}
.kxl-chip.is-busy { border-color: var(--color-error); }
.kxl-chip.is-normal { border-color: var(--color-warning); }
.kxl-chip b { font-weight: var(--fw-semibold); }

.kxl-updated {
  font-size: var(--fs-nano);
  color: var(--color-text-muted);
  margin: 0;
}

/* 주차 */
.kxl-parklist { display: grid; gap: var(--space-3); }
.kxl-lot {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-neutral-100);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.kxl-lot__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.kxl-lot__name {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  color: var(--color-neutral-900); margin: 0;
}
.kxl-lot__note { font-size: var(--fs-nano); color: var(--color-text-muted); margin: var(--space-1) 0 0; }
.kxl-lot__bar {
  height: 8px; border-radius: var(--radius-pill);
  background: var(--color-neutral-100); overflow: hidden;
}
.kxl-lot__fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.kxl-lot__fill.is-free { background: var(--color-success); }
.kxl-lot__fill.is-normal { background: var(--color-warning); }
.kxl-lot__fill.is-busy { background: var(--color-error); }
.kxl-lot__meta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-2); font-size: var(--fs-caption); color: var(--color-neutral-600);
}
.kxl-lot__meta b { color: var(--color-neutral-900); font-weight: var(--fw-semibold); }

.kxl-mypasses { margin-top: var(--space-2); display: grid; gap: var(--space-2); }
.kxl-passlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.kxl-pass {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-neutral-100); border-radius: var(--radius-sm);
}
.kxl-pass__no { display: block; font-weight: var(--fw-semibold); color: var(--color-neutral-900); font-size: var(--fs-caption); }
.kxl-pass__meta { display: block; font-size: var(--fs-nano); color: var(--color-text-muted); }
.kxl-empty { font-size: var(--fs-caption); color: var(--color-text-muted); }

/* 구매 폼 */
.kxl-buy { display: grid; gap: var(--space-3); }
.kxl-buy__lot { font-weight: var(--fw-semibold); color: var(--color-neutral-900); margin: 0; }
.kxl-field { display: grid; gap: var(--space-1); font-size: var(--fs-caption); color: var(--color-neutral-700); }
.kxl-field input, .kxl-field select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  color: var(--color-neutral-900);
  background: var(--color-white);
}
.kxl-buy__note { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-nano); color: var(--color-text-muted); margin: 0; }
.kxl-buy__err { font-size: var(--fs-caption); color: var(--color-error); margin: 0; }
