:root {
  --bg: #1c1b19;
  --surface: #262421;
  --surface-2: #2f2c28;
  --line: #38342f;
  --text: #ece7df;
  --muted: #9b9389;
  --faint: #6f685f;
  --accent: #cc785c;        /* clay */
  --accent-soft: #3a2c25;
  --alert: #e0795f;
  --ok: #8aa87f;
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
body { font-size: 14px; line-height: 1.5; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 20px; }

/* top bar */
.bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.btn { border: 0; background: var(--accent); color: #1c1b19; font-weight: 550; font-size: 14px; padding: 9px 16px; border-radius: 9px; cursor: pointer; font-family: inherit; transition: filter .15s, transform .04s; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: scale(.98); }
.btn.sharing { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }

/* layout */
.main { display: grid; grid-template-columns: 1fr 280px; gap: 14px; align-items: start; }
.viewer { display: flex; flex-direction: column; gap: 10px; }

/* video stage (scrollable for zoom/pan) */
.stage { position: relative; background: #100f0e; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-height: 240px; }
/* 스크롤바 숨김 (드래그로 패닝) */
.stage { scrollbar-width: none; -ms-overflow-style: none; }
.stage::-webkit-scrollbar { width: 0; height: 0; display: none; }
.frame { position: relative; width: 100%; }
#video { display: block; width: 100%; height: auto; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
#overlay.panning { cursor: grabbing; }
#overlay.draw { cursor: crosshair; }
.placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); pointer-events: none; }

/* tools */
.tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* 세그먼트 컨트롤 — 이동/그리기(.modes)와 기능 선택(.pick) 동일 디자인 */
.modes, .pick { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.pick.dim { opacity: .45; pointer-events: none; }
.mode-btn, .seg-btn { border: 0; background: transparent; color: var(--muted); font-size: 13px; font-family: inherit; padding: 5px 11px; border-radius: 7px; cursor: pointer; transition: color .15s, background .15s; }
.mode-btn:hover, .seg-btn:hover { color: var(--text); }
.mode-btn.is-active, .seg-btn.is-active { background: var(--accent); color: #1c1b19; font-weight: 550; }
.zoom { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.zbtn { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; font-family: inherit; }
.zbtn:hover { border-color: var(--faint); }
#zoomVal { min-width: 42px; text-align: center; font-size: 13px; }
.hint { color: var(--faint); font-size: 13px; }

/* rail */
.rail { display: flex; flex-direction: column; gap: 14px; }
.block { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }

/* settings rows */
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; }
.row + .row { border-top: 1px solid var(--line); }
.row.stack { flex-direction: column; align-items: stretch; gap: 8px; }
.row > span:first-child { color: var(--muted); }
.unit { color: var(--faint); display: inline-flex; align-items: center; gap: 5px; }
input[type=number] { width: 56px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 5px 7px; font-size: 13px; font-family: inherit; text-align: right; }
input[type=number]:focus { outline: none; border-color: var(--accent); }
.buffgroups { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.buffgroups label { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; }
.buffgroups input { accent-color: var(--accent); width: auto; }
.sndtest { display: flex; gap: 6px; }
.sndtest .mini { flex: 1; text-align: center; }
.sub { color: var(--faint); font-size: 12px; font-weight: 400; }
.switch { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
.switch input { accent-color: var(--accent); width: auto; }
.lie-state { color: var(--muted); font-size: 12.5px; padding: 2px 0 8px; font-variant-numeric: tabular-nums; }
.urlinput { width: 100%; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 7px 9px; font-size: 12.5px; font-family: inherit; }
.urlinput:focus { outline: none; border-color: var(--accent); }
.urlinput::placeholder { color: var(--faint); }
.adv { margin-top: 4px; }
.adv summary { color: var(--accent); cursor: pointer; padding: 7px 0; list-style: none; font-size: 13px; }
.adv summary::-webkit-details-marker { display: none; }
.adv[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 4px; }

/* regions */
.regions { display: flex; flex-direction: column; gap: 8px; }
.empty { color: var(--faint); font-size: 13px; }
.region { border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; background: var(--surface-2); }
.r-name { display: flex; align-items: center; gap: 8px; font-weight: 550; }
.r-name::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.region.exp .r-name::before { background: #7d9bd1; }
.region.rune .r-name::before { background: var(--accent); }
.region.buff .r-name::before { background: var(--alert); }
.r-state { color: var(--muted); font-size: 12.5px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.r-actions { display: flex; gap: 6px; margin-top: 9px; }
.mini { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 7px; padding: 4px 9px; font-size: 12px; cursor: pointer; font-family: inherit; }
.mini:hover { color: var(--text); border-color: var(--faint); }
.mini.danger:hover { color: var(--alert); border-color: var(--alert); }

/* log — viewer(좌측) 컬럼 안, 영상 바로 아래에 위치 → rail 높이와 무관 */
.log-block { margin-top: 4px; }
.log { height: 132px; overflow: auto; font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace; font-size: 12.5px; color: var(--faint); display: flex; flex-direction: column; gap: 2px; }
.log .alert { color: var(--alert); }
.log .ok { color: var(--ok); }

@media (max-width: 820px) { .main { grid-template-columns: 1fr; } }