body[data-app="bus-seats"] {
  --paper: #e9edf0;
  --surface: #f8fafb;
  --ink: #222e39;
  --muted: #50606e;
  --line: #d1dae1;
  --wash: #e4edf5;
  --accent: #174d75;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
}

.bus-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "header header" "board manifest" "actions manifest";
  grid-template-rows: auto 1fr auto;
  gap: 0;
  border: 1px solid #c7d2dc;
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.bus-head {
  grid-area: header;
  padding: 10px 18px;
  color: #f5f8fa;
  background: #243746;
  border: 0;
}

.bus-head strong { color: inherit; }
.bus-route,
.bus-hud,
.bus-clock,
.bus-score { display: flex; align-items: center; gap: 12px; }
.bus-hud { gap: 14px; }
.bus-clock,
.bus-score { gap: 6px; white-space: nowrap; }
.bus-clock { padding-right: 14px; border-right: 1px solid #6b7e8a; }
.bus-clock span,
.bus-score span { font-size: .72rem; color: #cfdae2; }
.bus-clock strong { font-size: .96rem; font-variant-numeric: tabular-nums; }
.bus-clock[data-low] strong { color: #ffd28d; }
.bus-head .stage-indicator { color: #e0e9ef; }
.bus-head .stage-dots i { background: #627684; }
.bus-head .stage-dots .is-current { background: #bce4f6; }

.bus-answer-label {
  width: fit-content;
  margin: 0 auto 8px;
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  scroll-margin-top: 62px;
}

.bus-area {
  grid-area: board;
  border: 0;
  border-radius: 0;
  background: #e0e6eb;
}

.bus-platform,
.bus-area[data-round="1"] .bus-platform,
.bus-area[data-round="2"] .bus-platform {
  background: #e0e6eb;
  border: 0;
  padding: 15px 18px 8px;
}

.bus-shell {
  --upholstery: #3d607c;
  --upholstery-edge: #243e56;
  --aisle: #79888f;
  max-width: 300px;
  border: 3px solid #334653;
  border-radius: 34px 34px 15px 15px;
  background: #aeb9bf;
  padding: 6px;
}

.bus-area[data-round="1"] .bus-shell { --upholstery: #666158; --upholstery-edge: #464038; }
.bus-area[data-round="2"] .bus-shell { --upholstery: #565a76; --upholstery-edge: #393d55; }

.bus-front {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 14px 37px;
  min-height: 0;
  padding: 0;
  gap: 3px;
  margin-bottom: 3px;
  background: #4b5f6b;
  border-radius: 25px 25px 3px 3px;
  overflow: hidden;
}

.bus-windshield {
  grid-column: 1 / -1;
  height: 14px;
  background: #a9c9d6;
  border-bottom: 3px solid #384b57;
}

.driver-cabin, .bus-entrance {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  align-self: stretch;
  color: #f1f6f9;
  font-size: .66rem;
}

.driver-cabin { background: #344652; border-radius: 0 7px 0 0; }
.driver-cabin small { font-size: inherit; white-space: nowrap; }
.driver-cabin .wheel { flex: none; width: 17px; height: 17px; border-width: 2px; }
.bus-entrance {
  grid-column: 3;
  width: auto;
  height: auto;
  border-left: 2px solid #2c414e;
  background: repeating-linear-gradient(0deg, #3b4e59 0 2px, #607681 2px 6px);
  text-shadow: 0 1px #22323c;
}

.bus-interior { display: grid; grid-template-columns: 9px minmax(0,1fr) 9px; gap: 4px; }
.bus-windows { display: grid; grid-template-rows: repeat(3,minmax(0,1fr)); gap: 6px; }
.bus-windows i { background: #bdd6de; border: 1px solid #718995; border-radius: 3px; }
.bus-tail { height: 11px; margin-top: 4px; border-radius: 2px 2px 8px 8px; background: #84949c; }
.seat-grid {
  grid-template-columns: 1fr 1fr minmax(22px,.52fr) 1fr 1fr;
  grid-template-rows: repeat(3, 58px);
  padding: 0;
  gap: 4px;
  background: #9caab1;
}

.bus-aisle {
  grid-area: 1 / 3 / 4 / 4;
  display: grid;
  place-items: center;
  border-inline: 1px solid #657680;
  background: var(--aisle);
  color: #f7fafb;
  font-size: .61rem;
  writing-mode: vertical-rl;
}

.seat-grid .seat {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0;
  padding: 4px 0 3px;
  min-height: 0;
  border: 1px solid var(--upholstery-edge);
  border-bottom: 3px solid var(--upholstery-edge);
  border-radius: 8px 8px 6px 6px;
  background: var(--upholstery);
  color: #fff;
}

.seat-grid .seat::before {
  content: "";
  position: absolute;
  inset: 4px 5px auto;
  height: 10px;
  border-radius: 4px;
  border: 1px solid #f2f8ff2e;
  background: #f2f8ff26;
}

.seat-grid .seat strong { position: relative; font-size: .88rem; line-height: 1.05; }
.seat-grid .seat small { position: relative; color: inherit; font-size: .7rem; }
.seat-grid .seat.occupied { color: #243b4b; background: var(--person); border-color: #64737c; }
.seat-grid .seat.occupied::before { background: #fcfdff70; border-color: #33475a22; }
.seat-grid .seat.blocked { color: #3e4c55; background: #aab6bf; border-color: #73838d; }
.seat-grid .seat.blocked::before { content: "예약"; display: grid; place-items: center; height: 16px; font-size: .58rem; color: #f6f9fb; background: #556671; }
.seat-grid .seat:disabled { opacity: 1; }
.bus-area[data-selecting] .seat:not(.blocked) { outline: 1px solid #e6f7ff; outline-offset: -3px; }
.seat-grid .seat[aria-pressed="true"] { outline: 2px solid #115175; outline-offset: 1px; }
.seat-grid .seat:focus-visible { outline: 3px solid #f1d486; outline-offset: -3px; }

.bus-legend {
  justify-content: center;
  gap: 12px;
  padding: 8px 0 2px;
  margin: 0;
  color: #354959;
  background: transparent;
  font-size: .72rem;
}

.ticket {
  grid-area: manifest;
  align-self: stretch;
  padding: 16px 16px 13px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
}

.ticket .side-title { padding: 0; border: 0; }
.boarding-help { color: var(--muted); font-size: .76rem; margin: 5px 0 9px; min-height: 1.45em; }
.ticket .passengers { grid-template-columns: minmax(0,1fr); gap: 0; margin: 0; }
.ticket .passenger {
  display: grid;
  grid-template-columns: 25px minmax(34px,auto) minmax(0,1fr) auto;
  align-items: center;
  padding: 7px 6px;
  gap: 6px;
  min-height: 56px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

.ticket .passenger strong { font-size: .82rem; }
.ticket .passenger small { font-size: .69rem; line-height: 1.28; }
.ticket .passenger .seat-number { font-size: .7rem; margin: 0; white-space: nowrap; justify-self: end; }
.ticket .person-mark { flex-basis: 22px; height: 22px; font-size: .72rem; border-radius: 6px; }
.ticket .passenger[aria-pressed="true"] { background: #dceaf4; border-color: #326185; }
.ticket .passenger[aria-pressed="true"] strong { color: var(--accent); }
.ticket .passenger:disabled { opacity: .88; }

.request-panel { margin-top: 12px; border-top: 1px solid var(--line); }
.request-panel summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .81rem;
  font-weight: 750;
  cursor: pointer;
}

.request-panel summary::-webkit-details-marker { display: none; }
.request-panel summary::before { content: "▸"; width: 9px; color: var(--accent); }
.request-panel[open] summary::before { content: "▾"; }
.request-panel summary small { margin-left: auto; color: var(--muted); font-size: .72rem; }
.request-panel .seat-requests { margin-top: 0; }
.request-panel .seat-requests li { min-height: 32px; border-color: var(--line); }

.bus-actions {
  grid-area: actions;
  align-self: stretch;
  padding: 10px 14px 13px;
  border-top: 1px solid var(--line);
}

.bus-actions .primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.bus-actions .game-status { color: var(--muted); }
.bus-actions .game-result { color: var(--ink); }

@media (max-width: 730px) {
  .bus-layout { grid-template-columns: minmax(0,1fr); grid-template-areas: "header" "manifest" "board" "actions"; grid-template-rows: auto; overflow: clip; }
  .bus-head { position: sticky; top: 0; z-index: 3; padding-inline: 10px; gap: 6px; }
  .bus-route, .bus-hud { gap: 7px; }
  .bus-clock { padding-right: 7px; }
  .bus-head .stage-dots { display: none; }
  .bus-platform { padding-inline: 12px; }
  .ticket { padding: 10px; border-left: 0; border-bottom: 1px solid var(--line); }
  .ticket .passengers { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
  .ticket .passenger {
    grid-template-columns: 22px minmax(0,1fr) auto;
    align-items: center;
    min-height: 45px;
    padding: 5px;
    gap: 2px 5px;
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .ticket .passenger small:not(.seat-number) { grid-column: 2 / -1; grid-row: 2; margin: 0; }
  .ticket .passenger .seat-number { grid-column: 3; grid-row: 1; font-size: .6rem; }
  .seat-grid { grid-template-rows: repeat(3, 50px); }
  .ticket .boarding-help { margin-block: 3px 6px; }
  .request-panel { margin-top: 7px; }
  .request-panel summary { min-height: 33px; }
  .bus-actions { padding-inline: 10px; }
}

.bus-entrance { position: relative; isolation: isolate; overflow: hidden; background: #3b4e59; }
.bus-entrance::before,
.bus-entrance::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 50%;
  border: 1px solid #526975;
  background: repeating-linear-gradient(0deg, #3b4e59 0 2px, #70828a 2px 6px);
  transition: transform 340ms ease-in-out;
}

.bus-entrance::before { left: 0; }
.bus-entrance::after { right: 0; }
.bus-area[data-boarding] .bus-entrance::before { transform: translateX(-77%); }
.bus-area[data-boarding] .bus-entrance::after { transform: translateX(77%); }
.seat-grid .seat, .ticket .passenger { transition: background-color 180ms ease-out, border-color 180ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .bus-entrance::before, .bus-entrance::after, .seat-grid .seat, .ticket .passenger { transition: none; }
}