/* Racing 2026: Figma R2026 screens, applied on top of the existing live app. */
:root {
  color-scheme: dark;
  --bg: #090e13;
  --panel: #142129;
  --raised: #1b3037;
  --line: #33484e;
  --text: #f3f7f4;
  --muted: #a9bbb9;
  --lime: #69e3ce;
  --teal: #69e3ce;
  --orange: #ffb568;
  --danger: #ff7474;
}

html, body { background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
[hidden] { display: none !important; }

.app-shell { display: grid; grid-template-columns: 470px minmax(0, 1fr); background: var(--bg); }
.sidebar { display: grid; grid-template-columns: 88px minmax(0, 382px); grid-template-rows: 94px minmax(0, 1fr) 48px; min-width: 0; background: var(--bg); border-right: 1px solid var(--line); }
.brand-row { grid-column: 1; grid-row: 1; justify-content: center; padding: 17px 7px; border-right: 1px solid var(--line); border-bottom: 0; }
.brand-row .brand { justify-content: center; width: 100%; }
.brand-row .brand img { width: 42px; height: 42px; }
.brand-row .brand > span, .brand-row .edition { display: none; }
.main-nav { grid-column: 1; grid-row: 2 / 4; display: flex; flex-direction: column; gap: 12px; align-items: stretch; padding: 30px 7px 16px; border-right: 1px solid var(--line); }
.main-nav .nav-item { display: grid; justify-items: center; align-content: center; gap: 4px; width: 73px; height: 70px; min-height: 70px; padding: 5px 2px; border-radius: 14px; font-size: 10px; line-height: 1.2; text-align: center; }
.main-nav .nav-item.active { color: var(--lime); background: #69e3ce14; box-shadow: inset 0 0 0 1px #69e3ce32; }
.main-nav .nav-icon { width: auto; font-size: 22px; }
.sidebar-divider { display: none; }
.sidebar-body { grid-column: 2; grid-row: 1 / 3; border-right: 1px solid var(--line); }
.sidebar-footer { grid-column: 2; grid-row: 3; border-right: 1px solid var(--line); }
.view-pane { padding: 40px 24px 36px; }
.view-pane h1 { font-size: 28px; line-height: 1.23; font-weight: 800; }
.view-pane h1 em { color: var(--text); }
.section-eyebrow { margin-bottom: 14px; color: var(--lime); font-size: 11px; letter-spacing: .11em; }
.section-copy { color: var(--muted); font-size: 13px; line-height: 1.6; }
.list-heading { font-size: 13px; }
.helper-note, .detail-note { color: var(--muted); }
.search-field, .field, .inline-form input, .dialog-fields input, .dialog-fields select { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; color: var(--text); }
.search-field { height: 48px; }
.search-field span, .text-action { color: var(--lime); }
.filter-chips { gap: 8px; }
.chip { min-height: 35px; border-radius: 17px; border-color: var(--line); background: var(--raised); color: var(--text); }
.chip.selected, .chip:hover { border-color: var(--lime); background: var(--lime); color: var(--bg); }
.primary-button { height: 48px; border-radius: 12px; background: var(--lime); color: var(--bg); font-size: 13px; }
.primary-button:hover { background: #8af0df; }
.subtle-button, .load-more { border-color: var(--line); border-radius: 12px; background: var(--raised); }
.course-card, .result-card, .stack-card, .gauge-card, .radar-card, .live-privacy-card, .metric, .course-filter-panel, .permission-card { border-color: var(--line); border-radius: 16px; background: var(--panel); }
.course-card:hover, .course-card.selected, .result-card:hover { border-color: var(--lime); transform: none; }
.score-pill { background: #69e3ce1c; color: var(--lime); }
.result-card .time, .hero-score strong, .profile-hero .metric b { color: var(--lime); }
.garage-vehicle-card, .vehicle-catalog-picker { border-color: var(--line); border-radius: 16px; background: var(--panel); }
.vehicle-spec-list span, .live-privacy-stats span, .live-setting-toggle, .live-action-button { background: var(--raised); border-color: var(--line); }
.live-action-button.is-active, .live-setting-toggle:has(input:checked) { border-color: var(--lime); background: #69e3ce18; }
.live-control-icon { background: var(--panel); color: var(--lime); }
.live-setting-toggle input { accent-color: var(--lime); }
.privacy-state.on { border-color: var(--lime); background: #69e3ce16; color: var(--lime); }
.gauge { border-color: var(--line); background: var(--raised); }
.gauge-dot { background: var(--orange); box-shadow: 0 0 9px #ffb56880; }
.live-eyebrow { color: var(--mint, #69e3ce); }
.detail-panel { position: absolute; z-index: 610; right: 18px; top: 75px; bottom: 18px; width: min(380px, calc(100vw - 520px)); display: none; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 20px 70px #0009; }
.detail-panel.open { display: block; }
.detail-inner { padding: 24px; }
.detail-empty span, .detail-category { color: var(--lime); }
.map-stage { min-width: 0; background: #101a22; }
.map-stage #map { background: #101a22; }
.leaflet-container { background: #101a22; }
/* A temporary dark treatment for the existing raster source. Vector tiles remain the production path. */
.leaflet-tile-pane { filter: none !important; }
.leaflet-tile-pane img.leaflet-tile { filter: grayscale(.75) invert(.87) hue-rotate(174deg) saturate(.65) brightness(.76) contrast(.94); }
.course-marker { background: var(--lime); border-color: var(--panel); box-shadow: 0 0 0 2px #69e3ce6b, 0 4px 15px #0009; }
.course-marker.flowing { background: #84baef; box-shadow: 0 0 0 2px #84baef75; }
.course-marker.open { background: var(--orange); box-shadow: 0 0 0 2px #ffb56875; }
.me-marker { box-shadow: 0 0 0 3px #69e3ce80, 0 0 18px #69e3ce70; }
.peer-marker { background: var(--orange); box-shadow: 0 0 0 2px #ffb56880; }
.topbar { top: 19px; left: auto; right: 19px; width: max-content; max-width: calc(100% - 38px); height: 47px; border-color: var(--line); border-radius: 13px; background: #142129eb; box-shadow: 0 12px 28px #0006; }
.topbar-title { color: var(--text); }
.topbar-title b { color: var(--lime); }
.account-button { background: var(--raised); border: 1px solid var(--line); border-radius: 9px; color: var(--text); }
.connection-dot.on { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.map-bottom-label { bottom: 17px; left: 18px; border: 1px solid var(--line); border-radius: 8px; background: #142129c9; }
.map-bottom-label span { color: var(--lime); }
.leaflet-control-attribution { display: block !important; color: var(--muted) !important; background: #142129d9 !important; }
.racing-map-search { display: none; }
.racing-map-caption { position: absolute; z-index: 430; top: 27px; left: 28px; display: grid; gap: 6px; max-width: 300px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: #142129ec; color: var(--text); pointer-events: none; }
.racing-map-caption strong { color: var(--lime); font-size: 11px; letter-spacing: .12em; }
.racing-map-caption span { font-size: 11px; line-height: 1.4; }
body:not([data-ck-view="discover"]) .racing-map-caption { display: none; }
.map-traffic-legend, .map-live-legend { border-color: var(--line); border-radius: 12px; background: #142129e9; }
.toast { border-color: var(--line); border-radius: 12px; background: var(--panel); }
dialog { border-color: var(--line); border-radius: 18px; background: var(--panel); }
.dialog-eyebrow { color: var(--lime); }

/* The live HUD uses existing GPS, motion and crew data from app.js. */
.map-drive-hud { top: auto; bottom: 22px; left: 50%; width: 390px; max-width: calc(100% - 32px); min-height: 235px; display: grid; grid-template-columns: minmax(0, 1fr) 140px; grid-template-rows: 25px 1fr 32px 29px 30px; column-gap: 12px; row-gap: 5px; align-items: stretch; padding: 13px 15px; border-color: var(--line); border-radius: 18px; background: #142129f2; pointer-events: auto; }
.map-drive-hud[hidden] { display: none !important; }
body:not(.ck-driving) .map-drive-hud { display: none !important; }
.racing-hud-kicker { grid-column: 1 / 3; display: flex; align-items: center; justify-content: space-between; color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.racing-hud-kicker span { color: var(--muted); letter-spacing: 0; font-weight: 600; }
.hud-speed { grid-column: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; min-width: 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.hud-speed::before { content: '현재 속도 · GPS'; color: var(--muted); font-size: 10px; }
.hud-speed b { color: var(--text); font-size: 43px; font-weight: 800; letter-spacing: -.07em; }
.hud-speed small { color: var(--muted); font-size: 11px; }
.hud-g { grid-column: 2; justify-self: center; align-self: stretch; display: grid; place-items: center; width: 140px; height: auto; min-height: 104px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.hud-g::before { content: 'PHONE G'; position: absolute; top: 9px; left: 13px; color: var(--muted); font-size: 10px; font-weight: 800; }
.hud-g::after { content: '휴대폰 추정'; position: absolute; bottom: 8px; left: 13px; color: var(--muted); font-size: 9px; }
.hud-g>i:nth-of-type(1) { width: 62px; height: 1px; background: var(--line); }
.hud-g>i:nth-of-type(2) { width: 1px; height: 62px; background: var(--line); }
.hud-g-dot { width: 9px; height: 9px; background: var(--orange); box-shadow: 0 0 9px #ffb568a0; }
.hud-g.unavailable .hud-g-dot { display: none; }
.hud-g small { bottom: 21px; max-width: 120px; overflow: hidden; color: var(--orange); font-size: 9px; text-overflow: ellipsis; }
.hud-score { grid-column: 1 / 3; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 9px; border: 1px solid #ffb56846; border-radius: 9px; background: #ffb56810; }
.hud-score>small { grid-column: auto; color: var(--orange); font-size: 9px; }
.hud-score>b { color: var(--orange); font-size: 22px; }
.hud-score>span { padding: 0; color: var(--text); font-size: 10px; }
.hud-score>em { grid-column: auto; max-width: none; margin-left: auto; color: var(--muted); font-size: 9px; }
.hud-live-state { grid-column: 1 / 3; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin: 0; }
.hud-live-state span { color: var(--muted); font-size: 9px; }
.hud-live-state span.on:before { background: var(--lime); box-shadow: 0 0 6px var(--lime); }
.racing-hud-actions { grid-column: 1 / 3; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.racing-hud-distance { color: var(--muted); font-size: 10px; }
.racing-hud-controls { display: flex; gap: 6px; }
.racing-hud-controls button { min-height: 29px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--text); font-size: 10px; font-weight: 800; cursor: pointer; }
.racing-hud-controls .racing-end { border-color: #ff747470; color: #ffd9d9; }

/* Keep the permission check and start control reachable before long telemetry panels. */
[data-pane="live"].active { display: flex; flex-direction: column; }
[data-pane="live"] #drivePermissionCard { order: 1; }
[data-pane="live"] #driveButton { order: 2; }
[data-pane="live"] .live-status { order: 3; }
[data-pane="live"] .gauge-card { order: 4; }
[data-pane="live"] .live-privacy-card { order: 5; }
[data-pane="live"] .radar-card { order: 6; }
[data-pane="live"] .live-action-grid { order: 7; }
[data-pane="live"] .voice-action-grid { order: 8; }
[data-pane="live"] #liveNotice { order: 9; }
[data-pane="live"] #voiceList, [data-pane="live"] #peerList { order: 10; }

@media (max-width: 760px) {
  .app-shell { display: block; height: 100dvh; }
  .map-stage { position: absolute; inset: 0; }
  .sidebar { position: absolute; top: auto; right: 0; bottom: 62px; left: 0; z-index: 600; display: flex; width: auto; border: 1px solid var(--line); border-radius: 24px 24px 0 0; background: var(--panel); box-shadow: 0 -18px 42px #0009; }
  .sidebar-body { border: 0; }
  .brand-row, .main-nav, .sidebar-footer { display: none; }
  .view-pane { padding: 15px 19px 28px; }
  .view-pane h1 { font-size: 26px; }
  .mobile-sheet-handle { border-color: var(--line); border-radius: 24px 24px 0 0; background: var(--panel); }
  .sheet-grip { background: #6b8c8c; }
  .sheet-handle-copy b { color: var(--text); }
  .sheet-handle-copy small { color: var(--muted); }
  .mobile-nav { height: 62px; border-color: var(--line); background: var(--panel); }
  .mobile-nav button { min-width: 52px; color: var(--muted); }
  .mobile-nav button.active { color: var(--lime); background: #69e3ce16; box-shadow: inset 0 0 0 1px #69e3ce36; }
  .topbar { top: calc(11px + env(safe-area-inset-top)); right: 13px; left: 13px; width: auto; max-width: none; height: 49px; padding: 0 11px; border-radius: 15px; }
  .topbar-title { font-size: 11px; letter-spacing: .08em; }
  .topbar-title span { color: var(--muted); }
  .mobile-menu { color: var(--lime); }
  .racing-map-caption { top: calc(74px + env(safe-area-inset-top)); left: 16px; padding: 0; border: 0; background: transparent; }
  .racing-map-caption span { display: none; }
  .racing-map-search { position: absolute; z-index: 455; top: calc(102px + env(safe-area-inset-top)); right: 16px; left: 16px; display: none; align-items: center; height: 48px; gap: 10px; padding: 0 15px; border: 1px solid var(--line); border-radius: 15px; background: #142129f2; box-shadow: 0 10px 26px #0007; }
  body[data-ck-view="discover"] .racing-map-search { display: flex; }
  .racing-map-search span { color: var(--lime); font-size: 23px; }
  .racing-map-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 15px; }
  .racing-map-search input::placeholder { color: var(--muted); }
  [data-pane="discover"] .search-field { display: none; }
  [data-pane="discover"]>.filter-chips { margin-top: 0; }
  [data-pane="discover"] .list-heading { margin-top: 18px; }
  .course-card, .result-card, .stack-card { border-radius: 15px; }
  .map-bottom-label { display: none; }
  .leaflet-control-attribution { font-size: 8px !important; }
  .detail-panel { top: auto; right: 0; bottom: 62px; left: 0; width: auto; border-radius: 24px 24px 0 0; }
  .map-drive-hud { position: absolute; top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; min-height: 250px; padding: 15px 17px max(18px, env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 19px 19px 0 0; transform: none; }
  body.ck-driving .sidebar { display: none; }
  body.ck-driving.ck-controls-open .sidebar { display: flex; bottom: 0; z-index: 720; height: min(70dvh, 640px) !important; max-height: calc(100dvh - 70px); }
  body.ck-driving .mobile-nav { display: none; }
  body.ck-driving .map-drive-hud { z-index: 680; }
  body.ck-driving.ck-controls-open .map-drive-hud { z-index: 650; }
  body.ck-driving .leaflet-control-attribution { margin-bottom: 256px !important; }
  body.ck-driving .map-live-legend { display: none; }
  body.ck-driving .topbar { z-index: 550; }
  body.ck-driving .racing-map-search, body.ck-driving .racing-map-caption { display: none; }
  body.ck-driving .toast { bottom: 265px; }
}

@media (min-width: 761px) and (max-width: 1020px) {
  .app-shell { grid-template-columns: 380px minmax(0, 1fr); }
  .sidebar { grid-template-columns: 72px minmax(0, 308px); }
  .main-nav .nav-item { width: 58px; }
  .view-pane { padding-right: 18px; padding-left: 18px; }
  .detail-panel { width: min(350px, calc(100vw - 402px)); }
}