:root { --bg:#0b0d10; --card:#161a20; --line:#2a303a; --fg:#e8ecf1; --mut:#8b95a3;
  --G:#22c55e; --Y:#facc15; --R:#ef4444; --acc:#3b82f6; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,-apple-system,"Malgun Gothic",sans-serif; }
header { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); }
.brand { color:var(--fg); text-decoration:none; font-weight:700; margin-right:auto; }
main { padding:16px; max-width:1100px; margin:0 auto; }
.muted { color:var(--mut); font-size:13px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
a.card { display:block; color:inherit; text-decoration:none; }
h2 { margin:4px 0 12px; font-size:20px; } h3 { margin:14px 0 8px; font-size:15px; color:var(--mut); }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.grow { flex:1; }
.btn, button { background:#232a34; color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:9px 14px;
  font:inherit; cursor:pointer; text-decoration:none; touch-action:manipulation; }
.btn.small, button.small { padding:5px 9px; font-size:14px; }
button.pri { background:var(--acc); border-color:var(--acc); }
button.danger { color:var(--R); }
input, select { background:#0f1318; color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:8px; font:inherit; min-width:0; }
input.num { width:90px; text-align:right; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--mut); }
.tabs { display:flex; gap:6px; margin-bottom:12px; overflow-x:auto; }
.tabs button.on { background:var(--acc); border-color:var(--acc); }

/* 실시간 표시 */
.live { display:grid; grid-template-columns:1fr; gap:10px; }
.lamp { display:flex; align-items:center; gap:18px; }
.tl { display:flex; gap:8px; background:#05070a; border:2px solid #333b47; border-radius:999px; padding:8px 10px; }
.tl .l { width:44px; height:44px; border-radius:50%; background:#20262e; display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:900; line-height:1; color:#39424d; }
.tl .R.on { background:var(--R); box-shadow:0 0 18px var(--R); }
.tl .Y.on { background:var(--Y); box-shadow:0 0 18px var(--Y); }
.tl .G.on { background:var(--G); box-shadow:0 0 18px var(--G); color:#03240f; }
.tl .G:not(:empty) { background:#111; } .tl .G.on:not(:empty) { background:#04130a; color:var(--G); text-shadow:0 0 12px var(--G); }
.lamp .sec { font-size:52px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
.lamp .nx { font-size:13px; color:var(--mut); }
.c-G { color:var(--G); } .c-Y { color:var(--Y); } .c-R { color:var(--R); }
.bar { position:relative; height:18px; border-radius:5px; overflow:hidden; background:#333; margin:4px 0 10px; }
.bar i { position:absolute; top:0; bottom:0; }
.bar b { position:absolute; top:-2px; bottom:-2px; width:2px; background:#fff; }
.bg-G { background:var(--G); } .bg-Y { background:var(--Y); } .bg-R { background:var(--R); }

/* 홀드→릴리즈 버튼 */
.hold { user-select:none; -webkit-user-select:none; touch-action:none; padding:22px 8px; font-size:17px; font-weight:700;
  border-width:2px; flex:1; min-width:90px; }
.hold.G { border-color:var(--G); } .hold.Y { border-color:var(--Y); } .hold.R { border-color:var(--R); }
.hold.down.G { background:var(--G); color:#000; } .hold.down.Y { background:var(--Y); color:#000; } .hold.down.R { background:var(--R); }
table { width:100%; border-collapse:collapse; font-size:14px; }
td,th { padding:6px 4px; border-bottom:1px solid var(--line); text-align:left; }
td.n { font-variant-numeric:tabular-nums; text-align:right; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#000d; border:1px solid var(--line);
  padding:10px 16px; border-radius:20px; z-index:9; }

/* 주행 모드 (테슬라 화면용) */
.drive .tl { gap:14px; padding:14px 18px; }
.drive .tl .l { width:110px; height:110px; font-size:88px; }
.drive .lamp { gap:36px; }
.drive .lamp .sec { font-size:130px; }
.drive .lamp .nx { font-size:18px; }
.drive h2 { font-size:28px; }
.drive .arr { font-size:22px; margin-top:6px; }