/* The page is one airport board: sign, controls, five mechanical columns. */
.board-shell {
  width: 100%;
  min-height: 100svh;
  margin: 0;
  border: 10px solid #101010;
  border-radius: 0;
  color: #f5f4ef;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #1e1e1e 0%, #080808 22%, #111 54%, #050505 100%);
  box-shadow: inset 0 0 0 2px #55534d, inset 0 0 18px rgba(0,0,0,.9);
  isolation: isolate;
}
.board-header {
  border-bottom: 7px solid #050505;
  color: #050505;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px),
    linear-gradient(#ffdd17, #f9c900);
  box-shadow: inset 0 -7px 10px rgba(117,78,0,.16), inset 0 1px 0 rgba(255,255,255,.45);
}
.board-header-inner { display: grid; grid-template-columns: 156px minmax(0,1fr) auto; align-items: center; gap: 24px; min-height: 203px; padding: 15px 28px; }
.board-marquee-symbol { display: grid; place-items: center; width: 156px; height: 156px; border-radius: 14px; color: #ffd700; background: #060606; }
.board-marquee-symbol img { width: 124px; height: 124px; object-fit: contain; filter: brightness(0) invert(1); }
.board-marquee-copy { min-width: 0; }
.board-marquee-title-line { white-space: nowrap; }
.board-marquee-title-line strong { display: block; width: max-content; max-width: 100%; font: 900 clamp(76px,9.6vw,148px)/.79 "NmBoardDisplay", "Arial Black", sans-serif; letter-spacing: -.035em; transform: scaleX(.92); transform-origin: left center; }
.board-marquee-copy p { margin: 5px 0 0; font: 900 clamp(26px,3.1vw,45px)/1 "NmBoardDisplay", "Arial Black", sans-serif; letter-spacing: -.04em; white-space: nowrap; }
.board-marquee-brand { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.board-logo { font: 900 clamp(20px,2.45vw,36px)/1 Futura, "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.board-logo sup { font-size: .45em; margin-left: 1px; vertical-align: top; }
.board-marquee-icons { display: flex; align-items: center; gap: 15px; }
.board-marquee-icons svg { width: 43px; height: 43px; stroke: #080808; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.board-marquee-icons svg + svg { padding-left: 13px; border-left: 2px solid #0c0c0c; box-sizing: content-box; }
.board-marquee-icons svg:last-child { fill: #080808; stroke: #080808; }
.board-live-badge { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.board-live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #777; }
.board-live-badge[data-state="live"]::before { background: #189b54; }
.board-live-badge[data-state="stale"]::before { background: #ad6816; }
.board-plane-arrival { display: none; }
.board-shell[data-type="arrival"] .board-plane-departure { display: none; }
.board-shell[data-type="arrival"] .board-plane-arrival { display: block; }

@media (min-width: 761px) and (max-width: 1100px) {
  .board-header-inner { grid-template-columns: 110px minmax(0,1fr) auto; gap: 15px; min-height: 155px; padding: 12px 18px; }
  .board-marquee-symbol { width: 110px; height: 110px; }
  .board-marquee-symbol img { width: 88px; height: 88px; }
  .board-marquee-title-line strong { font-size: clamp(69px,8vw,93px); }
  .board-marquee-copy p { font-size: clamp(22px,2.5vw,28px); }
  .board-logo { font-size: clamp(19px,2.2vw,25px); }
  .board-marquee-icons svg { width: 30px; height: 30px; }
}

.board-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 60px; padding: 5px 16px; border-bottom: 3px solid #333; background: linear-gradient(#171717,#0a0a0a); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -4px 8px rgba(0,0,0,.8); }
.board-tabs { display: grid; grid-template-columns: 1fr 1fr; width: min(40%,590px); }
.board-tabs button { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 6px 12px; border: 1px solid #626262; border-radius: 5px; color: #f0f0f0; background: #111; white-space: nowrap; }
.board-tabs button:first-child { border-radius: 5px 0 0 5px; }
.board-tabs button:last-child { border-radius: 0 5px 5px 0; }
.board-tabs button[aria-selected="true"] { border-color: #ffcf09; color: #080808; background: #ffcf09; }
.board-tabs button span { font: 900 clamp(20px,1.9vw,27px)/1 "NmBoardDisplay", "Arial Black", sans-serif; }
.board-tabs button small { font-size: clamp(11px,1vw,17px); font-weight: 900; }
.board-utilities { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.board-utilities button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 11px; border: 1px solid #818181; border-radius: 6px; color: #f3f3f3; background: #101010; font: 900 clamp(12px,1.1vw,16px)/1 "NmBoardDisplay", "Arial Black", sans-serif; white-space: nowrap; }
.board-utilities button svg { width: 20px; height: 20px; flex: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.board-utilities button:hover, .board-utilities button:focus-visible { border-color: #ffcf09; color: #ffcf09; }
.board-utilities button:disabled { opacity: .55; cursor: wait; }
#board-sound[aria-pressed="true"] { color: #111; background: #ffcf09; border-color: #ffcf09; }

.board-panel { background: #070707; }
.board-table-wrap { position: relative; min-height: calc(100svh - 229px); padding: 0 2px 12px; background: radial-gradient(ellipse at 50% -20%, #252525 0, #0d0d0d 42%, #050505 100%); box-shadow: inset 0 10px 18px rgba(0,0,0,.6); }
.board-loader { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 210px; color: #ffcf09; background: #0a0a0a; }
.board-loader[hidden] { display: none !important; }
.board-loader-text { font: 900 clamp(22px,3vw,36px)/1 Futura, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .12em; text-align: center; }
.board-loader-caption { font: 900 12px/1 Futura, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .25em; }
.flap-bank--clock { --slot-w: 17px; --slot-h: 30px; }
.clock-separator { color: #ffcf09; }

.flight-table { display: block; width: 100%; text-align: left; }
.flight-table thead, .flight-table tbody { display: block; width: 100%; }
.flight-table thead { position: sticky; top: 0; z-index: 3; background: #050505; box-shadow: 0 4px 8px #0009; }
.flight-table thead tr, .flight-table tbody tr:not(.board-placeholder) {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,2fr) minmax(0,1fr) minmax(0,.7fr) minmax(0,1.35fr);
  column-gap: 4px;
  align-items: stretch;
  padding: 0 2px;
  background: #050505;
}
.flight-table thead tr { min-height: 41px; border-bottom: 3px solid #050505; }
.flight-table th { display: flex; align-items: center; min-width: 0; padding: 4px; border: 0; color: #eee; background: linear-gradient(#171717,#0e0e0e); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.9); font: 900 clamp(15px,1.3vw,21px)/1 "NmBoardDisplay", "Arial Black", sans-serif; letter-spacing: .1em; }
.flight-table tbody { background: #0e0e0e; }
.flight-table tbody tr:not(.board-placeholder) { min-height: clamp(70px,5.8vw,86px); margin: 0; border: 0; border-bottom: 3px solid #050505; border-radius: 0; box-shadow: none; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 80px; }
.flight-table tbody tr.is-entering .flap-bank { animation: board-bank-settle 140ms cubic-bezier(.2,.8,.2,1) backwards; animation-delay: var(--entrance-delay,0ms); }
@keyframes board-bank-settle { from { opacity: .78; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .flight-table tbody tr.is-entering .flap-bank { animation: none !important; } }
.flight-table tbody tr:not(.board-placeholder):hover td,
.flight-table tbody tr:not(.board-placeholder):focus-within td { background: #222018; }
.flight-table tbody td { position: relative; min-width: 0; padding: 2px; border: 0; background: transparent; align-content: center; overflow: hidden; box-shadow: inset -1px 0 rgba(255,255,255,.045), inset 1px 0 rgba(0,0,0,.8); }
.flight-number { display: inline-block; max-width: 100%; padding: 0; border: 0; color: inherit; background: none; text-align: left; }
.flight-number:hover .flap-slot, .flight-number:focus-visible .flap-slot { border-color: #ffcf09; }
.flight-cell-sub, .airline-name { display: block; margin-top: 2px; color: #aaa; font: 900 clamp(10px,.95vw,14px)/1 "NmBoardDisplay", "Arial Black", sans-serif; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.airline-name { color: #ffcf09; }
.flight-cell-sub.scheduled-time { color: #aaa; font: 400 9px/1.15 "Helvetica Neue", Helvetica, Arial, "Apple SD Gothic Neo", sans-serif; letter-spacing: 0; }
.flight-table td[data-field="time"].is-revised .flap-slot { color: #ff654f; }
.route-korean { color: #ffcf09; font-family: Futura, "Helvetica Neue", Helvetica, Arial,"Apple SD Gothic Neo",sans-serif; letter-spacing: 0; }
.status-korean { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.flap-bank--flight { --slot-w: clamp(18px,2.45vw,36px); --slot-h: clamp(46px,3.9vw,58px); }
.flap-bank--route  { --slot-w: clamp(14px,1.84vw,28px); --slot-h: clamp(46px,3.9vw,58px); }
.flap-bank--time   { --slot-w: clamp(18px,2.5vw,36px); --slot-h: clamp(46px,3.9vw,58px); }
.flap-bank--gate   { --slot-w: clamp(18px,2.4vw,34px); --slot-h: clamp(46px,3.9vw,58px); }
.flap-bank--status { --slot-w: clamp(14px,1.9vw,29px); --slot-h: clamp(46px,3.9vw,58px); }

/* The status column is the board's yellow signal. */
.flight-table td[data-field="status"] .flap-slot { color: #ffce00; }

.board-placeholder { display: block; }
.board-placeholder td { display: block; padding: 34px 14px; border: 0; color: #ffcf09; background: #111; font: 900 18px/1.3 Futura, "Helvetica Neue", Helvetica, Arial,sans-serif; letter-spacing: .12em; text-align: center; }
.board-more { display: block; width: 100%; min-height: 42px; margin: 0; border: 1px solid #555; color: #ffcf09; background: #151515; font: 900 14px/1.2 Futura, "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; }
.board-more[hidden] { display: none; }
.board-more:hover, .board-more:focus-visible { background: #26221a; }
.board-status-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 30px; padding: 5px 15px; border-top: 1px solid #302e2a; color: #aaa; background: #101010; font-size: 10px; font-weight: 800; }
.board-status-line time { color: #ffcf09; white-space: nowrap; }
.board-disclaimer { max-width: 900px; margin: 0; padding: 10px 15px 16px; color: #999; font-size: 11px; line-height: 1.5; }

@media (max-width: 760px) {
  .board-shell { width: 100%; min-height: 0; border-width: 6px; box-shadow: inset 0 0 0 1px #55534d, inset 0 0 11px rgba(0,0,0,.9); }
  .board-header { border-bottom-width: 6px; }
  .board-header-inner { position: relative; grid-template-columns: 62px minmax(0,1fr) auto; align-items: start; gap: 7px; min-height: 99px; padding: 8px; }
  .board-marquee-symbol { width: 62px; height: 62px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 2px 3px 0 rgba(0,0,0,.28); }
  .board-marquee-symbol img { width: 47px; height: 47px; }
  .board-marquee-title-line { display: block; }
  .board-marquee-title-line strong { display: block; width: max-content; margin-right: 0; font-size: clamp(31px,8.5vw,46px); line-height: .84; letter-spacing: -.025em; transform: scaleX(.78); transform-origin: left center; }
  .board-marquee-copy p { position: static; margin: 3px 0 0; font-size: 14px; line-height: 1; }
  .board-marquee-brand { gap: 8px; }
  .board-logo { font-size: clamp(10px,2.8vw,16px); }
  .board-marquee-icons { gap: 4px; }
  .board-marquee-icons svg { width: 19px; height: 19px; stroke-width: 2.2; }
  .board-marquee-icons svg + svg { padding-left: 4px; border-left-width: 1px; }
  .board-live-badge { gap: 3px; padding: 3px 4px; font-size: 7px; letter-spacing: 0; }
  .board-live-badge::before { width: 5px; height: 5px; }
  .board-controls { display: block; min-height: 0; padding: 5px; }
  .board-tabs { width: 100%; }
  .board-tabs button { min-height: 44px; padding: 5px; gap: 5px; }
  .board-tabs button span { font-size: clamp(18px,5vw,24px); }
  .board-tabs button small { font-size: 11px; }
  .board-utilities { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }
  #board-sound { display: none; }
  .board-utilities button { min-width: 0; min-height: 44px; padding: 2px; gap: 3px; font-size: clamp(11px,2.9vw,13px); }
  .board-utilities button svg { width: 17px; height: 17px; }
  .board-table-wrap { min-height: 0; padding: 0 1px 9px; }
  .flight-table tbody { background: #020202; }
  .flight-table thead tr, .flight-table tbody tr:not(.board-placeholder) { grid-template-columns: minmax(0,44fr) minmax(0,56fr); column-gap: 2px; padding: 0 1px; }
  .flight-table thead tr { min-height: 34px; grid-template-areas: "flight route"; border-bottom-width: 3px; }
  .flight-table th { padding: 3px; font-size: 12px; letter-spacing: .07em; }
  .flight-table tbody tr:not(.board-placeholder) { min-height: 128px; grid-template-rows: 1fr 1fr; row-gap: 3px; margin-bottom: 7px; border-bottom: 0; contain-intrinsic-size: auto 128px; }
  .flight-table tbody td { padding: 2px 1px; align-content: start; }
  .flight-table thead th:nth-child(1), .flight-table tbody td[data-field="flight"] { grid-area: flight; }
  .flight-table thead th:nth-child(2), .flight-table tbody td[data-field="route"] { grid-area: route; }
  .flight-table tbody td[data-field="time"] { grid-area: time; }
  .flight-table thead th:nth-child(4), .flight-table tbody td[data-field="gate"] { display: none; }
  .flight-table tbody td[data-field="status"] { grid-area: status; }
  .flight-table thead th:nth-child(3), .flight-table thead th:nth-child(5) { display: none; }
  .flight-table tbody tr:not(.board-placeholder) { grid-template-areas: "flight route" "time status"; }
  .flap-bank--flight { --slot-w: clamp(18px,5.6vw,24px); --slot-h: 46px; }
  .flap-bank--route { --slot-w: clamp(14px,4.6vw,19px); --slot-h: 46px; }
  .flap-bank--time { --slot-w: clamp(22px,7.2vw,31px); --slot-h: 46px; }
  .flap-bank--status { --slot-w: clamp(17px,4.9vw,21px); --slot-h: 46px; }
  .flight-table .flap-slot { --glyph-size: min(calc(var(--slot-h) * .76),calc(var(--slot-w) * 1.35)); }
  .flight-table .flap-glyph { transform: scaleX(.7); }
  .airline-name, .flight-cell-sub { color: rgba(255,207,9,.8); font-family: "Helvetica Neue", Helvetica, Arial, "Apple SD Gothic Neo", sans-serif; font-size: clamp(8px,2.3vw,9.5px); font-weight: 500; line-height: 1.15; letter-spacing: .015em; margin-top: 2px; }
  .flight-cell-sub.scheduled-time { color: #aaa; font-size: clamp(8px,2.1vw,9px); font-weight: 400; letter-spacing: 0; }
  .board-status-line { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .board-disclaimer { padding: 10px 8px 16px; font-size: 10px; }
}
@media (max-width: 360px) {
  .board-header-inner { grid-template-columns: 56px minmax(0,1fr) auto; gap: 5px; min-height: 91px; }
  .board-marquee-symbol { width: 56px; height: 56px; }
  .board-marquee-symbol img { width: 46px; height: 46px; }
  .board-marquee-title-line strong { font-size: 25px; }
  .board-marquee-copy p { font-size: 12px; }
  .board-marquee-icons svg { width: 15px; height: 15px; }
  .board-live-badge { font-size: 6px; }
  .board-tabs button span { font-size: clamp(16px,5vw,18px); }
  .board-tabs button small { font-size: 10px; }
  .board-utilities button { font-size: 11px; }
  .board-utilities button svg { width: 16px; height: 16px; }
}