* { box-sizing: border-box; }
body{background: #111;color: white;font-family: 'Apple SD Gothic Neo', sans-serif;text-align: center;padding: 30px;margin:0;}
header,main{padding:12px;display:flex;flex-wrap:wrap;gap:8px;}
.pill{padding:8px 14px;border-radius:999px;border:none;cursor:pointer;font-weight:600;}
.start{background:#22c55e;color:#000;}
.stop{background:#ef4444;color:#000;}
.share{background:#0ea5e9;color:#000;}
.panel{border:1px solid #fff;border-radius:16px;padding:12px;flex:1 1 380px;min-width:320px;}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.readout{font-size:36px;font-weight:800;color:#ffd54a;text-align:center;margin:6px 0;}
.readout-sub{font-size:18px;color:#ffd54a;opacity:0.9;text-align:center;margin:4px 0;}
.timer{font-size:48px;text-align:center;}
.muted{color:#0f9ae5;text-align:center;margin:2px 0;}
.video-wrap{position:relative;border:2px solid #333;border-radius:12px;overflow:hidden;transition:all 0.3s;}
video{width:100%;display:block;}
canvas#overlay {position:absolute; inset:0;pointer-events:auto; /* 캔버스 이벤트 허용 */}
.overlay-active { cursor: crosshair; } /* 드래그 중 포인터 */
.drag-shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);z-index:99;}
.chip{padding:4px 8px;border:1px solid #444;border-radius:999px;font-size:13px;}
select{background:#161616;color:#fff;border:1px solid #333;padding:6px 8px;border-radius:8px;}
#overlay {pointer-events: auto; /* 이걸 추가해야 mousedown/mousemove 이벤트가 캔버스에 전달됨 */}
h2 {color: #ffee33; margin-bottom: 10px; font-size: 1.8rem; text-align: center;}
.container {max-width: 90%;width: 90%;padding: 20px;box-sizing: border-box;margin: auto;background: #ffffff;border-radius: 12px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);}