/* C9 차량관제 — 관제 콘솔. 박스 안에서만 돌아가므로 바깥 글꼴·파일을 불러오지 않는다. */
:root {
  --ground: #EEF1F5; --panel: #FFFFFF; --line: #E8ECF1; --border: #D9E0E8;
  --t1: #16202E; --t2: #55637A; --t3: #64718A;
  --navy: #0B2A52; --navy-2: #0B3462; --cyan: #18ECF7;
  --sel: #EAF2FB; --warn: #8A5A00;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--t1);
  font-family: "IBM Plex Sans KR", "Pretendard", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 13px; line-height: 1.4;
}
h1, h2, h3 { margin: 0; }
.muted { color: var(--t2); }
.num, td, .tile-value, .clock { font-variant-numeric: tabular-nums; }

.shell { display: flex; min-height: 100vh; }

/* 왼쪽 메뉴 */
.rail { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--navy); color: #FFFFFF; position: sticky; top: 0; height: 100vh; }
.brand { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.brand-mark { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: #0B3462; border: 1px solid rgba(24,236,247,0.6); color: var(--cyan); font-size: 12px; font-weight: 700; }
.brand-name { font-size: 16px; font-weight: 700; }
.menu { display: flex; flex-direction: column; padding: 8px; }
.menu-item { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #B7C6DC; text-decoration: none; white-space: nowrap; }
.menu-item svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-item.is-on { color: #FFFFFF; font-weight: 600; background: rgba(255,255,255,0.14); }
.menu-item.is-off { color: #8FA3C0; }
.menu-item em { margin-left: auto; font-style: normal; font-size: 11px; color: #8FA3C0; }
.menu-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.box-state { margin: auto 12px 12px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,0.08); font-size: 12px; }
.box-state-title { display: flex; align-items: center; gap: 6px; height: 24px; font-weight: 600; }
.box-state-row { display: flex; justify-content: space-between; align-items: center; height: 24px; }
.box-state-row span { color: #B7C6DC; }
.box-state-row b { font-weight: 500; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #8FA3C0; }
.dot.ok { background: var(--cyan); }
.dot.bad { background: #FF8C90; }

/* 본문 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 20px; background: var(--panel); border-bottom: 1px solid var(--border); }
.topbar h1 { font-size: 18px; font-weight: 700; white-space: nowrap; }
.topbar .sep { width: 1px; height: 18px; background: var(--border); }
.topbar .site { color: var(--t2); }
.topbar .clock { margin-left: auto; color: var(--t2); }
.body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.alert { padding: 10px 14px; border-radius: 8px; background: #FFF3CC; border: 1px solid #E6C766; color: #6B4700; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tiles.two-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
.tile { height: 76px; padding: 10px 14px; display: flex; flex-direction: column; justify-content: space-between; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.tile-label { font-size: 12px; color: var(--t2); }
.tile-row { display: flex; align-items: baseline; gap: 10px; }
.tile-value { font-size: 22px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.tile-sub { font-size: 12px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cols { flex: 1; display: flex; gap: 12px; align-items: flex-start; }
.col-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.panel-head { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.panel-head h2 { font-size: 14px; font-weight: 600; }
.empty { padding: 20px 14px; color: var(--t2); border-top: 1px solid var(--line); }
.detail > .empty { border-top: 0; }

.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; }
.grid th { height: 32px; padding: 0 10px; text-align: left; font-size: 12px; font-weight: 500; color: var(--t3); background: #F6F8FA; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid td { height: 56px; padding: 0 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid th:first-child, .grid td:first-child { padding-left: 14px; }
.grid .c-photo { width: 78px; }
.grid tbody tr { cursor: pointer; }
.grid tbody tr:hover { background: #F6F8FA; }
.grid tbody tr.is-sel { background: var(--sel); }
.grid tbody tr:focus-visible { outline: 2px solid var(--navy-2); outline-offset: -2px; }
.plate { font-size: 14px; font-weight: 600; }
.note { font-size: 12px; color: var(--t2); max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.strong { font-weight: 600; }
.warn { color: var(--warn); font-weight: 500; }

.thumb { width: 64px; height: 42px; border-radius: 4px; object-fit: cover; display: block; background: #E3E8EE; }
.thumb.none, .photo.none { display: grid; place-items: center; color: var(--t3); font-size: 11px; background: #E3E8EE; }

.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid; }
.chip.monthly { color: #0A5560; background: #DAF2F5; border-color: #8CCFD8; }
.chip.hourly { color: #46308F; background: #EAE4FB; border-color: #B9A9EC; }
.chip.unset { color: #445063; background: #EDF0F4; border-color: #C3CCD8; }
.chip.in { color: #154A9E; background: #DCE9FF; border-color: #9DBCF0; }
.chip.out { color: #7A4A10; background: #F6E7D2; border-color: #DDB988; }
.chip.done { color: #1B6B3A; background: #DDF3E4; border-color: #9AD1AD; }
.chip.unconfirmed { color: #6B4700; background: #FFF3CC; border-color: #E6C766; }

/* 상세 */
.detail { width: 380px; flex-shrink: 0; position: sticky; top: 16px; }
.detail-head { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.detail-head h2 { font-size: 18px; font-weight: 700; }
.detail-head .muted { margin-left: auto; }
.detail-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.photo { width: 100%; height: 116px; border-radius: 6px; object-fit: cover; display: block; background: #E3E8EE; }
.photo-cap { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.fields { display: grid; grid-template-columns: 84px minmax(0, 1fr); row-gap: 6px; margin: 0; }
.fields dt { color: var(--t3); }
.fields dd { margin: 0; }

@media (max-width: 1180px) {
  .cols { flex-direction: column; align-items: stretch; }
  .detail { width: auto; position: static; }
}
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .rail { width: auto; height: auto; position: static; }
  .menu { flex-direction: row; overflow-x: auto; }
  .menu-item { white-space: nowrap; }
  .menu-item em { margin-left: 6px; }
  .box-state { margin: 0 12px 12px; }
  .tiles { grid-template-columns: 1fr; }
  .body { padding: 12px; }
}

/* ---- 0.2: 로그인 · 계정 표시 · 요금 · 관리 콘솔 ---- */
.btn { min-height: 44px; padding: 0 16px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none; border: 1px solid transparent; }
.btn-primary { background: var(--navy-2); color: #FFFFFF; border-color: var(--navy-2); }
.btn-primary:hover { background: #0A2C52; }
.btn-line { background: #FFFFFF; color: var(--t1); border-color: #B9C4D2; }
.btn-line:hover { background: #F6F8FA; }
.btn-small { min-height: 36px; padding: 0 12px; font-weight: 500; }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn:focus-visible, .input:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
.input { height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid #B9C4D2; background: #FFFFFF; color: var(--t1); font: inherit; width: 100%; }
.input:disabled { background: #F1F3F6; color: var(--t3); }
label { display: block; margin: 12px 0 4px; color: var(--t2); }

.topbar .clock { margin-left: auto; }
.userbar { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.userbar .who { color: var(--t1); font-weight: 500; margin-right: 4px; white-space: nowrap; }
.userbar .extchip { white-space: nowrap; }

.feebox { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: #F6F8FA; }
.feebox-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.feebox-head h3 { font-size: 13px; font-weight: 600; }
.feelines { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; font-variant-numeric: tabular-nums; }
.feelines .total { padding-top: 8px; border-top: 1px solid var(--border); font-weight: 600; }
.feelines .sum { font-size: 16px; font-weight: 700; }

.login-page { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-card { width: 100%; max-width: 360px; padding: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.login-card .brand { height: auto; padding: 0 0 8px; }
.brand-dark .brand-name { color: var(--t1); }
.login-card .btn { width: 100%; margin-top: 16px; }
.login-card .alert { margin-top: 12px; }

.rail-tag { margin: 0 16px 4px; padding: 4px 8px; border-radius: 4px; background: rgba(24,236,247,0.14); color: #BDF6FA; font-size: 12px; font-weight: 600; align-self: flex-start; }
button.menu-item { width: 100%; border: 0; background: transparent; font-family: inherit; cursor: pointer; text-align: left; }
button.menu-item:hover { background: rgba(255,255,255,0.08); }
button.menu-item.is-on { background: rgba(255,255,255,0.14); }

.tab { display: flex; flex-direction: column; gap: 12px; }
.tab[hidden] { display: none; }
.hint { color: var(--t2); }
.notice { padding: 10px 14px; border-radius: 8px; background: #DDF3E4; border: 1px solid #9AD1AD; color: #1B6B3A; }
.pad { padding: 14px; }
.pad h2 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.tariff { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; margin-bottom: 14px; }
.form-grid td { height: 60px; }
.form-grid tbody tr, .plain tbody tr { cursor: default; }
.form-grid tbody tr:hover, .plain tbody tr:hover { background: transparent; }
.form-grid .input { min-width: 120px; }
.plain td { height: 40px; white-space: normal; }
.range { display: flex; align-items: center; gap: 6px; }
.vehform h2 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.vehfields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; align-items: end; }
.vehfields label { display: block; font-size: 12px; color: var(--t2); margin-bottom: 4px; }
.vehfields .input { width: 100%; }
.vehsubmit .btn { width: 100%; }
.note.warn { color: var(--warn); }
.note.ok { color: #1B6B3A; }
.feetag { display: inline-flex; align-items: center; gap: 8px; }
.chip.canceled { color: #445063; background: #EDF0F4; border-color: #C3CCD8; }
.actions { display: flex; gap: 6px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .two, .three { grid-template-columns: 1fr; }
  .userbar .who { display: none; }
  .topbar { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 12px; }
}

/* ---- 0.4: 차량 검색 · 통계 분석 ---- */
a.menu-item:hover { background: rgba(255,255,255,0.08); }
.searchbar { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.searchbar label { margin: 0; }
.searchbar .input { width: 280px; height: 44px; font-size: 15px; font-weight: 600; }
.candidates { display: flex; flex-wrap: wrap; gap: 8px; }
.side { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.vehicle-card { display: flex; gap: 16px; }
.vehicle-photo { width: 190px; height: 122px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #E3E8EE; }
.vehicle-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.vehicle-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vehicle-head h2 { font-size: 24px; font-weight: 700; margin: 0; }
.fields.wide { grid-template-columns: 84px minmax(0, 1fr) 84px minmax(0, 1fr); column-gap: 8px; }
.listrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; align-items: center; min-height: 40px; border-top: 1px solid var(--line); }
.listrow:first-child { border-top: 0; }
.rows tbody tr { cursor: default; }
.rows tbody tr:hover { background: transparent; }
.fields.wide dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.periodbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.push { margin-left: auto; }
.chartrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chart { padding: 4px 14px 14px; display: flex; flex-direction: column; }
.chart-head { min-height: 40px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chart-head h2 { font-size: 14px; font-weight: 600; }
.legend { margin-left: auto; display: flex; gap: 12px; font-size: 12px; color: var(--t2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sw.in, .bar.in { background: #2F6FE0; }
.sw.out, .bar.out { background: #C98A3A; }
.plot { display: grid; column-gap: 6px; align-items: end; height: 200px; border-bottom: 1px solid #B9C4D2; }
.group { display: flex; justify-content: center; align-items: flex-end; gap: 3px; min-width: 0; }
.barwrap { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.barlabel { font-size: 12px; color: var(--t2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { border-radius: 3px 3px 0 0; }
.bar.thin { width: 18px; }
.bar.mid { width: 40px; }
.bar.wide { width: 64px; }
.bar.navy { background: var(--navy-2); }
.bar.soft { opacity: 0.45; }
.xaxis { display: grid; column-gap: 6px; margin-top: 6px; font-size: 12px; color: var(--t2); text-align: center; }
.hbars { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 0; }
.hrow { display: grid; grid-template-columns: 170px minmax(0, 1fr) 110px; column-gap: 12px; align-items: center; min-height: 44px; }
.htrack { height: 18px; border-radius: 4px; background: #E3E8EE; overflow: hidden; }
.hfill { height: 100%; background: var(--navy-2); }
.hval { text-align: right; font-variant-numeric: tabular-nums; color: var(--t2); }
.hval b { color: var(--t1); }
.section-title { font-size: 14px; font-weight: 600; margin-top: 4px; }
@media (max-width: 1180px) { .side { width: auto; } .chartrow { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .vehicle-card { flex-direction: column; } .fields.wide { grid-template-columns: 84px minmax(0, 1fr); } .hrow { grid-template-columns: 110px minmax(0, 1fr) 90px; } .plot { overflow-x: auto; } }

/* ---- 0.5: 실시간 모니터링 ---- */
.cam .panel-head { gap: 10px; }
.cam .cam-time { margin-left: auto; }
.screen { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 496px); min-height: 240px; background: #0E1622; display: grid; place-items: center; overflow: hidden; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.screen img[hidden], .thumbcam img[hidden] { display: none; }
.screen-msg { position: relative; padding: 8px 14px; border-radius: 6px; color: #D5DEEA; background: rgba(14,22,34,0.72); text-align: center; max-width: 80%; }
.cam.is-stale .screen img { opacity: 0.55; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.thumbs[hidden] { display: none; }
.thumbcam { position: relative; aspect-ratio: 16 / 9; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #0E1622; cursor: pointer; font: inherit; }
.thumbcam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbcam.is-stale img { opacity: 0.55; }
.thumbcam.is-on { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--navy-2); }
.thumbcam:hover { border-color: #8FA3C0; }
.thumbcam.is-on:hover { border-color: var(--cyan); }
.thumbcam:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 2px; }
.thumbcap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 12px; font-weight: 500; color: #FFFFFF; background: rgba(14,22,34,0.78); }
.thumbname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumbcap .dot { flex-shrink: 0; }
.feedrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; column-gap: 10px; align-items: center; min-height: 58px; padding: 0 14px; border-top: 1px solid var(--line); }
.feedrow.is-new { background: #FFF8DC; }
.empty.panel { border-top: 1px solid var(--border); }
@media (max-width: 1180px) { .screen { max-height: none; } }
.viewbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.viewbar[hidden], .camgrid[hidden], .pager[hidden], .cam[hidden] { display: none; }
.seg { display: flex; gap: 6px; }
.pager { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.camgrid { display: grid; gap: 8px; width: 100%; max-width: calc((100vh - 252px) * 16 / 9); }
.camgrid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.camgrid.g9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.camgrid.g12 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: calc((100vh - 252px) * 64 / 27); }
.camgrid .thumbcam img { object-fit: contain; }
.camgrid .thumbcam.is-on { border-color: transparent; box-shadow: none; }
.thumbcam.is-empty { display: grid; place-items: center; color: #8FA3C0; font-size: 12px; cursor: default; }
.thumbcam.is-empty:hover { border-color: transparent; }
@media (max-width: 760px) { .camgrid.g9, .camgrid.g12 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .camgrid { max-width: none; } }

/* ---- 0.6: 인식된 모든 차량 ---- */
.chip.visitor { color: #5A4A1E; background: #F7EFD8; border-color: #DCC88F; }
.grid tbody tr.is-new { background: #FFF8DC; }
.grid tbody tr.is-new.is-sel { background: var(--sel); }

/* ---- 0.7: 실시간 모니터링 — 현황판 / 카메라 4분할(작게 · 「크게 보기」) + 최근 입출차 / 방치 차량 + 차량 상세 ---- */
.tiles.board { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.livegrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 12px; align-items: start; }
.livecol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.btn[hidden] { display: none; }
.camwall { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wallhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 36px; }
.wallhead h2 { font-size: 14px; font-weight: 600; margin-right: auto; }
.camwall .camgrid { max-width: none; }
.camwall .screen { max-height: none; min-height: 0; }
.camwall.is-wide { position: fixed; inset: 0; z-index: 50; padding: 16px 20px; background: var(--ground); overflow: auto; }
.camwall.is-wide .wallhead h2 { font-size: 18px; font-weight: 700; margin-right: 0; }
.camwall.is-wide .viewbar { margin-right: auto; }
.camwall.is-wide .screen { max-height: calc(100vh - 260px); min-height: 240px; }
.camwall.is-wide .camgrid { max-width: calc((100vh - 90px) * 16 / 9); }
.camwall.is-wide .camgrid.g12 { max-width: calc((100vh - 90px) * 64 / 27); }
body.no-scroll { overflow: hidden; }

.feedpanel { display: flex; flex-direction: column; }
.feedlist { overflow-y: auto; height: calc(100vh - 590px); min-height: 216px; }   /* 아래 차량 상세가 한 화면에 같이 보이게 남기고, 넘치는 줄은 안에서 굴린다 */
/* 한 줄 = 차량 사진 · 번호판 사진 · 번호와 인식 시각 · 입차 시각 · 주차 시간 · 요금 · 입출차/구분. 머리줄도 같은 칸 나눔을 쓴다. */
.feedlist .feedrow, .feedhead { display: grid; grid-template-columns: 88px 132px minmax(96px, 1fr) 84px 76px 88px 44px; column-gap: 8px; align-items: center; padding: 0 12px; }
.feedlist .feedrow { min-height: 66px; padding-top: 4px; padding-bottom: 4px; border-top: 1px solid var(--line); cursor: pointer; }
.feedhead { position: sticky; top: 0; z-index: 1; height: 28px; background: #F6F8FA; border-top: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--t2); }
.feedhead .pc-in, .feedhead .pc-dur, .feedhead .pc-fee { text-align: right; }
.pcell { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; line-height: 1.25; }
.pcell b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.pcell span { font-size: 11px; color: var(--t2); white-space: nowrap; }
.pcell span.warn { color: #B45309; font-weight: 600; }
.feedlist .feedrow:hover { background: #F6F8FA; }
.feedlist .feedrow.is-new { background: #FFF8DC; }
.feedlist .feedrow.is-sel { background: var(--sel); }
.feedlist .feedrow:focus-visible { outline: 2px solid var(--navy-2); outline-offset: -2px; }
.feedinfo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.feedlist .plate { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.feedlist .note { font-size: 11px; }
.feedlist .chip { height: 20px; padding: 0 6px; font-size: 11px; }
.feedlist .note { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chiprow { display: flex; gap: 8px; }
.chiprow .chip { height: 24px; padding: 0 10px; font-size: 13px; }
.chipcol { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

.carshot { display: block; border-radius: 6px; object-fit: cover; background: #E3E8EE; flex-shrink: 0; }
.carshot.big { width: 240px; height: 160px; }
.carshot.small { width: 88px; height: 56px; }
.carshot.none, .plateshot.none, .lotshot.none { display: grid; place-items: center; color: var(--t3); font-size: 12px; background: #E3E8EE; }
.plateshot { position: relative; overflow: hidden; border-radius: 6px; background: #0E1622; flex-shrink: 0; }
.plateshot img { position: absolute; max-width: none; visibility: hidden; }
.plateshot.big { width: 240px; height: 70px; }
.plateshot.small { width: 132px; height: 42px; align-self: center; }

.detailbody { display: flex; gap: 16px; padding: 4px 14px 14px; align-items: flex-start; }
.detailside { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.detailpanel .fields { row-gap: 3px; }
.hero-plate { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.detailpanel > .empty { border-top: 0; }
.detailpanel .fields { grid-template-columns: 76px minmax(0, 1fr); }

.lotbody { display: flex; gap: 16px; padding: 4px 14px 14px; align-items: flex-start; }
.lotshot { width: 260px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #0E1622; flex-shrink: 0; }
.lotshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lotinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lotinfo .hint { margin: 0; }
.lotstages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lotstage { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #F6F8FA; display: flex; flex-direction: column; gap: 2px; }
.lotstage b { font-size: 20px; font-weight: 700; }
.lotstage span { font-size: 12px; color: var(--t2); }

@media (max-width: 1500px) { .tiles.board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1281px) and (max-width: 1960px) {       /* 오른쪽 칸이 좁은 화면: 줄의 차량 사진을 접는다 (번호판 사진과 아래 상세의 사진은 남는다) */
  .feedlist .feedrow, .feedhead { grid-template-columns: 132px minmax(96px, 1fr) 84px 76px 88px 44px; }
  .feedlist .feedrow .carshot, .feedhead .h-car { display: none; }
}
@media (min-width: 1281px) and (max-width: 1720px) {
  .feedlist .feedrow, .feedhead { grid-template-columns: minmax(0, 1fr) 80px 72px 84px 44px; }
  .feedlist .feedrow .plateshot, .feedhead .h-plate { display: none; }
}
@media (max-width: 1280px) {
  .livegrid { grid-template-columns: 1fr; }
  .feedlist { height: auto; max-height: 520px; }
}
@media (max-width: 760px) {
  .tiles.board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { height: auto; min-height: 76px; gap: 6px; }
  .tile-row { flex-wrap: wrap; row-gap: 2px; }
  .tile-sub { white-space: normal; overflow: visible; text-overflow: clip; }
  .lotpanel .panel-head { flex-wrap: wrap; }
  .lotpanel .panel-head h2 { white-space: nowrap; }
  .feedlist .feedrow { grid-template-columns: 88px minmax(0, 1fr) 80px 44px; }
  .feedlist .feedrow .plateshot, .feedlist .feedrow .pc-in, .feedlist .feedrow .pc-dur, .feedhead { display: none; }
  .detailbody, .lotbody { flex-direction: column; }
  .carshot.big, .plateshot.big, .lotshot { width: 100%; }
  .hero-plate { font-size: 32px; }
}

/* ---- 0.8: 실시간 영상 (WebRTC) — 사진과 같은 자리에 같은 모양으로 ---- */
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #0E1622; }
.thumbcam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.camgrid .thumbcam video { object-fit: contain; }
.screen video[hidden] { display: none; }
.thumbcam video[hidden] { display: block; opacity: 0; pointer-events: none; }   /* 가려 둔 채로 먼저 틀어 첫 화면을 기다린다 */

/* ---- 방치 차량 화면 · 자리 구역 그리기 ---- */
.tiles.board.abn-tiles { margin-bottom: 12px; }
.abngrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 12px; align-items: start; margin-bottom: 12px; }
.lotmap, .loteditor { position: relative; line-height: 0; background: #0E1622; border-radius: 0 0 10px 10px; overflow: hidden; }
.loteditor { border-radius: 8px; margin-top: 10px; touch-action: none; user-select: none; }
.lotmap img, .loteditor img { width: 100%; height: auto; display: block; }
.lotmap svg, .loteditor svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lotmap .empty, .loteditor .empty { line-height: 1.5; color: #C9D3E0; }
.loteditor svg { cursor: crosshair; }
svg .slot { fill-opacity: 0.22; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
svg .slot.s-empty, svg .slot.s-unknown { fill: #9AA7B8; stroke: #E6EBF2; fill-opacity: 0.10; }
svg .slot.s-car, svg .slot.edit { fill: #2F7BF0; stroke: #7FB2FF; }
svg .slot.s-l1 { fill: #E6B800; stroke: #FFD84D; fill-opacity: 0.30; }
svg .slot.s-l2 { fill: #F08A1C; stroke: #FFB15E; fill-opacity: 0.34; }
svg .slot.s-l3 { fill: #E0322B; stroke: #FF7A72; fill-opacity: 0.38; }
svg .slotlabel { fill: #fff; font-size: 15px; font-weight: 700; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: rgba(0, 0, 0, 0.75); stroke-width: 3px; pointer-events: none; }
svg .handle { fill: #fff; stroke: #0B2A5B; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
svg .handle.draft { fill: #FFD84D; }
svg .draft { fill: none; stroke: #FFD84D; stroke-width: 2.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.maplegend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; font-size: 12px; color: var(--t2); }
.maplegend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, 0.2); }
.maplegend b { font-weight: 600; }
.lg.s-empty { background: #C9D0DA; } .lg.s-car { background: #2F7BF0; } .lg.s-l1 { background: #E6B800; } .lg.s-l2 { background: #F08A1C; } .lg.s-l3 { background: #E0322B; }
.slotlist { max-height: 560px; overflow-y: auto; }
.slotrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); border-left: 4px solid transparent; }
.slotrow.s-l1 { border-left-color: #E6B800; } .slotrow.s-l2 { border-left-color: #F08A1C; } .slotrow.s-l3 { border-left-color: #E0322B; background: #FFF5F4; }
.slotshots { display: flex; gap: 4px; }
.slotshots img, .slotnone { width: 92px; height: 66px; object-fit: cover; border-radius: 6px; background: #E3E8EE; display: block; }
.slotnone { display: grid; place-items: center; font-size: 12px; color: var(--t3); width: 188px; }
.slotinfo { min-width: 0; }
.slotname { font-size: 13px; color: var(--t2); }
.slotdwell { font-size: 19px; font-weight: 700; line-height: 1.25; }
.pastshot { width: 66px; height: 46px; object-fit: cover; border-radius: 5px; display: block; background: #E3E8EE; }
.lotbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lotbar h2 { font-size: 15px; font-weight: 700; }
.lotbar .push { margin-left: auto; }
.lotslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 12px; }
.lotslot { display: flex; align-items: center; gap: 8px; }
.lotslot .input { flex: 1; min-width: 0; }
.lotnum { width: 24px; height: 24px; border-radius: 50%; background: #2F7BF0; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
@media (max-width: 1100px) { .abngrid { grid-template-columns: 1fr; } .slotlist { max-height: none; } }
@media (max-width: 760px) { .slotshots img { width: 70px; height: 52px; } .slotnone { width: 144px; } }