:root{
  --bg:#EFEFEF; --panel:#FFFFFF; --panel-2:#F5F5F5; --line:#E2E2E2;
  --ink:#2A2A2A; --muted:#8A8A8A; --muted-2:#B0AFAF;
  --accent:#D9689A; --accent-dim:#F0A8C0; --accent-deep:#C24C7C;
  --font-display:'Syne','Pretendard',sans-serif;
  --font-body:'Pretendard',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1080px; --pad:clamp(16px,4vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:24px var(--pad) 60px}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:6px 0 22px;flex-wrap:wrap;gap:10px}
.brand{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.brand span{color:var(--accent)}
.topbar__right{display:flex;align-items:center;gap:14px}
.hint{font-size:11px;letter-spacing:.06em;color:var(--muted)}
.lang-toggle{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent);color:#fff;border:none;border-radius:999px;padding:6px 14px;cursor:pointer;transition:background .2s}
.lang-toggle:hover{background:var(--accent-deep)}

main{display:flex;flex-direction:column;gap:16px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.panel__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.panel__title{font-family:var(--font-display);font-weight:700;font-size:16px}
.panel__sub{font-size:10.5px;letter-spacing:.04em;color:var(--muted-2)}

/* 후처리 패널 토글 */
.panel__toggle{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.panel__toggle input{appearance:none;-webkit-appearance:none;width:34px;height:19px;border-radius:999px;background:#E0E0E0;
  border:1px solid var(--line);position:relative;cursor:pointer;flex:0 0 auto;transition:background .18s}
.panel__toggle input::after{content:"";position:absolute;top:1.5px;left:1.5px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .18s}
.panel__toggle input:checked{background:var(--accent);border-color:var(--accent)}
.panel__toggle input:checked::after{transform:translateX(15px)}
.ctls--fx.is-off,.row-controls--fx.is-off,.fx-graph--fx.is-off,.pill-row.is-off{opacity:.4;pointer-events:none}
.row-controls--fx{margin-bottom:14px}
@media(max-width:900px){.row-controls--fx{grid-template-columns:repeat(2,1fr)}}

/* 후처리 3열 (엔벨로프 · 필터 · 모듈레이션) */
.fx-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.fx-columns .panel{padding:16px}
.fx-columns .panel__head{margin-bottom:12px}
.fx-columns .panel__sub{flex-basis:100%}
.fx-columns .ctls--fx,.fx-columns .row-controls--fx{grid-template-columns:1fr}
.fx-columns .fx-graph{margin-bottom:0}
.fx-columns .row-controls--fx{margin-bottom:12px}
@media(max-width:940px){.fx-columns{grid-template-columns:1fr}}

/* 후처리 그래프 (엔벨로프 / 필터) */
.fx-graph{margin-bottom:14px}
.fx-canvas{width:100%;display:block;border-radius:8px;background:#fff;border:1px solid var(--line);
  touch-action:none;cursor:crosshair}
.fx-canvas--env{height:130px}
.fx-canvas--filter{height:150px}
.fx-canvas--mod{height:110px}
.fx-readout{margin-top:7px;font-size:10.5px;letter-spacing:.03em;color:var(--accent-deep)}

/* 모듈레이션 파형/타깃 선택 필 */
.pill-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pill{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;background:var(--panel-2);
  border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 13px;cursor:pointer;transition:.15s}
.pill:hover{border-color:var(--accent-dim);color:var(--ink)}
.pill.is-active{background:var(--accent);border-color:var(--accent);color:#fff}

/* dropzone */
.dropzone{border:1.5px dashed var(--line);border-radius:12px;padding:22px;background:var(--panel-2);cursor:pointer;transition:border-color .2s,background .2s}
.dropzone.is-drag{border-color:var(--accent);background:#FBEFF3}
.dropzone__inner{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:13.5px;color:var(--ink)}
.dropzone__icon{font-size:22px;color:var(--accent);line-height:1}
.dropzone__hint{font-size:10.5px;color:var(--muted-2)}

.sources{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.source-row{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.source-row__play{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#fff;border:1.5px solid var(--accent);
  color:var(--accent-deep);font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.source-row__play:hover{background:#FBEFF3}
.source-row__play.is-playing{background:var(--accent);color:#fff}
.source-row__play:disabled{opacity:.35;cursor:default;border-color:var(--line);color:var(--muted)}
.source-row__name{flex:1;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source-row__dur{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.source-row__badge{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:#FDECEF;color:var(--accent-deep)}
.source-row__x{font-family:var(--font-mono);font-size:13px;color:var(--muted);background:none;border:none;cursor:pointer;padding:2px 6px}
.source-row__x:hover{color:var(--accent-deep)}

/* scope row */
.scope-row{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
@media(max-width:760px){.scope-row{grid-template-columns:1fr}}
.scope-card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px}
.scope-card__head{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.scope-canvas{width:100%;height:120px;display:block;border-radius:8px;background:#fff;border:1px solid var(--line)}
.scope-legend{display:flex;gap:16px;margin-top:8px;font-size:10px;color:var(--muted)}
.scope-legend span{display:flex;align-items:center;gap:5px}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot--env{background:#5AB4D9}
.dot--dop{background:var(--accent)}

.transport{display:flex;gap:8px;margin-top:10px}

/* controls */
.row-controls{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}
@media(max-width:900px){.row-controls{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.row-controls{grid-template-columns:repeat(2,1fr)}}
.field{display:flex;flex-direction:column;gap:5px}
.field__label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.select,.number{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 9px;font-family:var(--font-body);font-size:12.5px;color:var(--ink)}
.select:focus,.number:focus{outline:none;border-color:var(--accent)}

.ctls{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 22px}
@media(max-width:820px){.ctls{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ctls{grid-template-columns:1fr}}
.ctl{display:flex;flex-direction:column;gap:6px}
.ctl__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ctl__name{font-size:11.5px;color:var(--ink)}
.ctl__val{font-family:var(--font-mono);font-size:11px;color:var(--accent-deep);font-weight:500;white-space:nowrap}

input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:#E8E8E8;border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2.5px solid var(--accent);cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2.5px solid var(--accent);cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--pct,50%),#E8E8E8 var(--pct,50%));height:4px;border-radius:2px}

/* action */
.panel--action{display:flex;flex-direction:column;gap:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--font-mono);font-size:10.5px;background:var(--panel-2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:5px 12px}
.chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff}

.action-buttons{display:flex;gap:10px;flex-wrap:wrap}
.btn{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;border-radius:8px;padding:11px 20px;cursor:pointer;transition:.2s;border:1px solid var(--line)}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn--out{background:#fff;color:var(--ink)}
.btn--out:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn--sm{padding:7px 14px;font-size:11px;background:#fff}
.btn:disabled{opacity:.45;cursor:default}

.status{min-height:14px;font-size:11px;color:var(--muted)}
.status.is-err{color:#B23B4F}
.status.is-ok{color:var(--accent-deep)}

.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:26px 4px 0;font-size:10.5px;color:var(--muted-2)}
.foot a:hover{color:var(--accent-deep)}