:root {
  --bg: #14161c;
  --panel: #1e2029;
  --panel2: #262a35;
  --line: #2c2f3a;
  --text: #e7e9ee;
  --muted: #9aa0ad;
  --accent: #6ea8fe;
  --on: #6ea8fe;         /* 켜진 음표 */
  --on-drum: #f4a26b;    /* 드럼 켜진 칸 */
  --playhead: #ffd166;   /* 재생 위치 */
  --black-key: #202430;  /* 검은건반 줄 */
}

* { box-sizing: border-box; }

/* display:flex 등을 준 요소도 hidden이면 확실히 숨긴다
   (author의 display 규칙이 UA의 [hidden]{display:none}을 이기는 문제 방지) */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 0 20px 24px;
}

/* ── 상단바 + 타임라인 (함께 위에 고정) ───── */
.topsticky {
  position: sticky;
  top: 0;
  z-index: 15;                 /* 트랙 위, 드로어/스크림(20,30) 아래 */
  margin: 0 -20px;             /* body의 좌우 여백을 상쇄해 배경이 화면 끝까지 */
  padding: 0 20px 6px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 0 0;
}
.transport {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;           /* 오른쪽으로 밀기 */
  flex-wrap: nowrap;           /* 버튼을 한 줄로 두고 */
  overflow-x: auto;            /* 넘치면 가로 스크롤 */
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: thin;       /* Firefox: 얇은 스크롤바 */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;         /* 스크롤바가 버튼을 가리지 않게 */
}
.transport::-webkit-scrollbar { height: 6px; }
.transport::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.transport button { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
/* 편집 모드 버튼 — 켜지면 강조(재생바 잠금 표시) */
#editMode.active {
  background: var(--accent);
  color: #0b1020;
  border-color: var(--accent);
  font-weight: 600;
}

/* ── 편집 모드 OFF(잠금): 곡을 바꾸는 컨트롤을 막는다. 재생·스크롤·공유·저장은 허용 ── */
body.locked .controls label,
body.locked #addTrack,
body.locked .bar-ctl,
body.locked .track-head select,
body.locked .track-head button:not(.t-collapse):not(.t-mute),
body.locked .track-head .t-vol input,
body.locked #moveBar {
  pointer-events: none;
  opacity: .45;
}
body.locked .cell { touch-action: pan-x pan-y !important; } /* 잠금 땐 노트 위에서도 스크롤되게 */

/* ── 재생 위치 타임라인 ──────────────────── */
#timelineWrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 0;
}
.tl-pos {
  font-size: 12px;
  color: var(--muted);
  min-width: 84px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.timeline {
  position: relative;
  flex: 1;
  height: 22px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;          /* 드래그를 우리가 처리 */
  overflow: hidden;
}
.tl-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: rgba(110, 168, 254, .22);
  pointer-events: none;
}
.tl-handle {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 10px;
  margin-left: -5px;
  background: var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  pointer-events: none;
}
/* 편집(노트 찍는) 위치 마커 — 재생 핸들과 별개(초록) */
.tl-edit {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #34d399;
  pointer-events: none;
}
#syncScroll.active {
  background: var(--accent);
  color: #0b1020;
  border-color: var(--accent);
  font-weight: 600;
}

/* ── 가로 줌 컨트롤 ── */
.zoom-ctl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
}
.zoom-lbl { font-size: 12px; color: var(--muted); white-space: nowrap; }
.zoom-ctl button { padding: 5px 8px; font-size: 14px; }
.zoom-ctl button:disabled { opacity: .35; cursor: default; }

/* ── 신디사이저: 악기 프리셋 버튼 ── */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}
.preset-btn:hover { border-color: var(--accent); }
.preset-btn:active { background: var(--accent); color: #0b1020; }
.preset-emoji { font-size: 22px; line-height: 1; }
.brand h1 { margin: 0; font-size: 20px; }
.brand .sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.icon-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  padding: 0 11px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); }
#hamburger span { display: block; height: 2px; background: var(--text); border-radius: 2px; }

/* ── 드로어(왼쪽 메뉴) ──────────────────── */
.drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform .22s ease;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 12px;
}
.drawer-head .icon-btn {
  width: 32px; height: 32px; padding: 0;
  align-items: center; gap: 0; font-size: 14px;
}
/* 새 곡 버튼 */
.new-song {
  width: 100%;
  text-align: center;
  background: var(--accent);
  color: #0b1020;
  font-weight: 600;
  border-color: var(--accent);
  margin-bottom: 10px;
}

/* 세션(내 곡) 목록 */
.session-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
}
.session-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.session-item:hover { border-color: var(--accent); }
.session-item.active { border-color: var(--accent); background: #223052; }
.session-item .s-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.session-item .s-name {
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-item .s-time { font-size: 11px; color: var(--muted); }
.session-item .s-rename {
  font: inherit; font-size: 14px;
  background: #10141c; border: 1px solid var(--accent);
  border-radius: 6px; padding: 3px 6px; color: var(--text); width: 100%;
}
.session-item .s-act {
  background: transparent; border: none; color: var(--muted);
  padding: 4px 6px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.session-item .s-act:hover { color: var(--text); background: #10141c; }

.menu-section-title {
  margin: 16px 0 8px;
  font-size: 12px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: .02em;
}
.menu-list { display: flex; flex-direction: column; gap: 6px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.menu-item:hover { border-color: var(--accent); }
.menu-item .ico { font-size: 16px; width: 20px; text-align: center; }
.menu-item .name { flex: 1; }
.menu-item .tag {
  font-size: 11px;
  color: var(--muted);
  background: #171a22;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}
.menu-item.locked { opacity: .8; }
.drawer-foot { margin-top: auto; color: var(--muted); font-size: 12px; }

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 20;
}

/* ── 상단 컨트롤 ────────────────────────── */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.controls label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--muted);
  gap: 4px;
}
button, select, input[type="range"] {
  font: inherit;
  color: var(--text);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #0b1020; font-weight: 600; border-color: var(--accent); }

/* ── 트랙 ───────────────────────────────── */
.tracks { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.track {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;   /* flex 항목이 내용(격자) 크기만큼 커지지 않게 → hscroll이 실제로 넘쳐 스크롤됨 */
}
.track.muted { opacity: .5; }
.track-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.track.collapsed .track-head { margin-bottom: 0; }
.track-head .name { font-weight: 600; }
.track-head .spacer { flex: 1; }
.track-head select, .track-head button { padding: 6px 10px; }
/* 작은 아이콘 버튼(접기·이름변경·순서) */
.track-head .t-collapse, .track-head .t-icon {
  padding: 4px 8px;
  min-width: 30px;
  font-size: 12px;
  color: var(--muted);
}
.track-head .t-collapse { font-size: 13px; }
.track-head .t-icon:disabled { opacity: .3; cursor: default; }
.track-head .t-icon:disabled:hover { border-color: var(--line); }
.track-head .t-rename {
  font: inherit; font-weight: 600;
  background: #10141c; border: 1px solid var(--accent);
  border-radius: 6px; padding: 4px 8px; color: var(--text);
  min-width: 120px;
}
/* 트랙 볼륨(소리 크기) */
.track-head .t-vol {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.track-head .t-vol-ico { font-size: 13px; }
.track-head .t-vol input[type="range"] {
  width: 84px;
  padding: 0;
}
.track-head .t-vol-val {
  font-size: 12px;
  color: var(--muted);
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 템포: 숫자 입력 + 슬라이더 */
.tempo-row { display: flex; align-items: center; gap: 8px; }
#bpmNum, #beatNum {
  width: 60px;
  font: inherit;
  color: var(--text);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
}
.beat-field .hint { color: var(--muted); font-size: 10px; }

.grid {
  display: grid;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: 2px;
}
/* 격자 스크롤 컨테이너(가로·세로 한 요소). 두 축을 한 요소가 맡되 touch-action으로 둘 다 허용한다.
   (축을 나눠 중첩하면 안쪽 컨테이너의 touch-action이 격자를 한 축으로 제한해 다른 축이 막힌다.) */
.gridscroll {
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;      /* 가로·세로 둘 다 드래그로 스크롤 */
  padding-bottom: 2px;
  display: flex;                  /* 격자 + 오른쪽 마디 조절 버튼을 가로로 */
  align-items: flex-start;
}
.gridscroll.tall { max-height: 344px; }  /* 멜로디: 약 13줄만 보이고 세로 스크롤 */
.grid.in-scroller {               /* 스크롤은 바깥 컨테이너가 맡으므로 격자는 넘치게 둔다 */
  overflow: visible;
  max-height: none;
  flex: 0 0 auto;                 /* 내용 크기 유지(줄어들지 않게) */
}
/* 격자 오른쪽 끝: 곡 길이 ＋/－ (세로). 위에 고정돼 세로 스크롤해도 보인다 */
.bar-ctl {
  flex: 0 0 auto;
  position: sticky;
  top: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px;
}
.bar-ctl button {
  width: 34px;
  height: 30px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}
.bar-ctl button:disabled { opacity: .3; cursor: default; }
.bar-ctl-label {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.label-cell {
  color: var(--muted);
  font-size: 11px;
  display: flex;
  align-items: center;
  padding-right: 8px;
  min-width: 48px;
  user-select: none;
  /* 가로로 스크롤해도 음계 라벨은 왼쪽에 고정. 아래로 지나가는 노트를 가리도록 패널색 배경 + 위 z-index. */
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--panel);
  box-shadow: 6px 0 6px -4px rgba(0, 0, 0, .35); /* 고정 라벨과 격자 사이 살짝 그림자로 경계 */
}
.label-cell.sharp { color: #6b7180; }
/* 음 이름을 눌러 소리 듣기 — 편집 잠금과 무관하게 항상 클릭 가능 */
.label-cell.playable { cursor: pointer; }
.label-cell.playable:hover { color: var(--text); background: var(--panel2); }
.label-cell.playable:active { background: var(--accent); color: #0b1020; }
.cell {
  position: relative;          /* 반칸 노트(::after)·가운데 분할선(::before) 기준 */
  background: #191c24;
  min-width: 0;                /* 줌 너비(gridTemplateColumns)가 칸 폭을 정한다 */
  height: var(--cell-h, 24px); /* 세로 줌: 칸 높이(grid의 --cell-h) */
  border-radius: 0;            /* 각지게 — 둥근 모서리는 박/마디 inset 선을 '{'처럼 휘게 만든다 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); /* 노트(칸) 윤곽선 — 더 밝게 */
  cursor: pointer;
  /* 오래 눌러도(홀드) 텍스트 선택/롱프레스 메뉴가 떠서 탭을 삼키지 않게 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* 반칸(32분음표) 노트: 칸의 중간(반칸 뒤)에서 시작하되 길이는 한 칸 노트와 똑같다(반쪽 아님).
   → 오른쪽으로 반 칸 밀린 온전한 노트로, 다음 칸 중간까지 이어진다. (길이 조절은 추후 기능) */
.cell.half-on::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: calc(100% + 2px);   /* 한 칸 길이(칸 너비 + 격자 간격) */
  background: var(--on);
  border-radius: 0;
  pointer-events: none;
  z-index: 2;                /* 다음 칸 위로 그려지게 */
}
.cell.half-on { z-index: 2; }
.cell.drum.half-on::after { background: var(--on-drum); }
/* 줌인(반박자 모드): 칸 가운데 '연한' 분할선 — 한박자(칸/박) 구분선보다 약하게 둔다 */
.grid.zoomed .cell::before {
  content: "";
  position: absolute;
  top: 5px; bottom: 5px; left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, .05);
  pointer-events: none;
}
.cell.black-key { background: var(--black-key); }
/* 마디(4칸 묶음): 얇고(2px) 연하게 */
.cell.beat { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 2px 0 0 #5f6678; }
/* 마디묶음(16칸 묶음): 약간 얇고(3px) 연하게 — 마디선보다는 조금 더 보이게 */
.cell.bar { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 3px 0 0 #7b8398; }
.cell.on, .cell.half-on { touch-action: none; } /* 노트(한 칸/반칸) 위 터치 드래그는 스크롤 대신 '노트 끌기' */
.cell.on { background: var(--on); }
.cell.on.drum { background: var(--on-drum); }
/* 기존 노트 끌어 옮기기: 원래 자리는 반투명, 놓일 자리는 미리보기 */
.cell.note-dragging { opacity: .35; }
/* 노트를 0.6초 길게 눌러 '이동 준비'된 상태 — 이제 드래그하면 옮겨진다 */
.cell.note-armed { box-shadow: inset 0 0 0 2px var(--accent); filter: brightness(1.25); }
.cell.note-target { background: rgba(110, 168, 254, .55); box-shadow: inset 0 0 0 2px var(--accent); }
/* 이동 모드: 활성 트랙만 스크롤 대신 선택/이동. 선택 범위는 강조 테두리 */
.gridscroll.move-active { touch-action: none; }
.gridscroll.move-active .cell { cursor: move; }
.cell.move-sel { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(110, 168, 254, .20); }
.cell.on.move-sel { background: var(--on); box-shadow: inset 0 0 0 2px var(--accent); }
.cell.on.drum.move-sel { background: var(--on-drum); }
.t-move.active { background: var(--accent); color: #0b1020; border-color: var(--accent); font-weight: 600; }
.t-move:disabled { opacity: .4; cursor: default; }
/* 하단 고정 이동 툴바 */
.move-bar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 12px;
  padding: 10px 14px; box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
  max-width: calc(100vw - 24px);
}
.move-bar .move-hint { font-size: 12px; color: var(--muted); }
.move-arrows { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: 26px 26px; gap: 3px; align-items: center; }
.move-arrows #mvUp { grid-column: 2; grid-row: 1; }
.move-arrows #mvLeft { grid-column: 1; grid-row: 2; }
.move-arrows #mvRight { grid-column: 3; grid-row: 2; }
.move-arrows #mvDown { grid-column: 2; grid-row: 2; }
.move-arrows button { padding: 0; font-size: 13px; height: 26px; }
#mvHalf.active { background: var(--accent); color: #0b1020; border-color: var(--accent); font-weight: 600; }
.cell.playing { outline: 2px solid var(--playhead); outline-offset: -2px; }
/* 핸들(현재 시점) 위치 열 — 노란색 세로 표시(정지·재생 모두) */
.cell.playhead-col {
  box-shadow: inset 0 0 0 2px var(--playhead);
  background: rgba(255, 209, 102, .16);
}
/* 켜진 칸이 현재열일 때: 노트 색을 그대로 두고(가려지지 않게) 노란 테두리만 덧입힌다 */
.cell.on.playhead-col { background: var(--on); box-shadow: inset 0 0 0 2px var(--playhead); }
.cell.on.drum.playhead-col { background: var(--on-drum); }
/* 마지막으로 클릭/편집한 열 — 옅은 초록 칠(재생 위치와 비슷하되 색만 초록) */
.cell.edit-col { background: rgba(52, 211, 153, .16); }
.cell.on.edit-col { background: var(--on); }        /* 노트 색은 유지 */
.cell.on.drum.edit-col { background: var(--on-drum); }

footer { margin-top: 14px; color: var(--muted); font-size: 12px; }

/* ── 토스트(안내 문구) ──────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: #0b1020;
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  z-index: 40;
}
.toast .toast-action {
  background: var(--accent);
  color: #0b1020;
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ── 모달(공유 팝업) ────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 50;
  padding: 20px;
}
.modal-card {
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
}
.modal-head .icon-btn { width: 32px; height: 32px; padding: 0; align-items: center; gap: 0; font-size: 14px; }
#modalBody p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.share-row { display: flex; gap: 8px; margin-bottom: 12px; }
.json-area {
  width: 100%; box-sizing: border-box;
  background: #10141c;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5;
  resize: vertical;
  margin-bottom: 8px;
}
.share-url {
  flex: 1; min-width: 0;
  background: #10141c;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
}
.share-note {
  background: #1a1508;
  border: 1px solid #4a3c14;
  border-radius: 8px;
  padding: 10px 12px;
  color: #e9c46a !important;
  font-size: 12.5px !important;
}

/* ── 신디사이저 편집기 ──────────────────── */
.synth-field { display: block; margin-bottom: 12px; }
.synth-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
/* 섹션 구분 헤더 */
.synth-section {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--text);
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.synth-section.blank { border: 0; margin: 10px 0 0; padding: 0; }
/* 맨 위 미리듣기 버튼(설정값 위) */
.synth-preview-top {
  display: block; width: 100%;
  margin: 10px 0 4px;
  padding: 10px;
  font-size: 15px; font-weight: 600;
  background: var(--accent); color: #0b1020;
  border: 0; border-radius: 10px; cursor: pointer;
}
.synth-preview-top:hover { filter: brightness(1.06); }
/* 접었다 폈다 하는 설정 그룹 */
.synth-group { margin: 12px 0 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.synth-group-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
  background: var(--panel2);
  border: 0; color: var(--text);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; text-align: left;
}
.synth-group-head:hover { color: var(--accent); }
.synth-group-arrow { flex: 0 0 auto; font-size: 11px; color: var(--muted); transition: transform .15s ease; }
.synth-group.collapsed .synth-group-arrow { transform: rotate(-90deg); }
.synth-group-body { padding: 12px 12px 2px; }
.synth-group.collapsed .synth-group-body { display: none; }
/* 라벨 옆 ? 도움말 버튼 */
.help-btn {
  flex: 0 0 auto;
  width: 18px; height: 18px; padding: 0;
  border-radius: 50%;
  font-size: 11px; font-weight: 700; line-height: 1;
  display: inline-grid; place-items: center;
  cursor: pointer;
}
/* 펼쳐지는 설명 박스 */
.synth-help {
  font-size: 12px; line-height: 1.5;
  color: var(--text);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 0 8px;
}
.synth-slider { display: flex; align-items: center; gap: 10px; }
.synth-slider input[type="range"] { flex: 1; padding: 0; }
.synth-val {
  min-width: 62px;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.wave-row { display: flex; gap: 6px; flex-wrap: wrap; }
.wave-btn {
  flex: 1;
  min-width: 64px;
  padding: 8px 6px;
  font-size: 13px;
}
.wave-btn.on { background: var(--accent); color: #0b1020; border-color: var(--accent); font-weight: 600; }