/* C3 · AI 가 노래를 만들어 줘요 */

/* 음마다 색. 낮은 음이 따뜻하고 높은 음이 시원합니다 */
.c3-pad, .c3-note { --hue: calc(28 + var(--d) * 34); }

.c3-screen {
  max-width: 460px; margin: 0 auto;
  padding: var(--s3);
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--drop-2);
}
.c3-strip {
  display: flex; align-items: flex-end; gap: 4px;
  min-height: 96px; overflow-x: auto; scroll-behavior: smooth;
}
.c3-note {
  flex: 0 0 auto; width: 30px;
  /* 높은 음일수록 위로 — 소리와 그림이 같은 방향입니다 */
  height: calc(28px + var(--d) * 11px);
  display: grid; place-items: center; align-content: end;
  padding-bottom: 3px;
  border: 2px solid var(--ink); border-radius: 8px;
  background: hsl(var(--hue) 82% 72%);
  font-size: .72rem; font-weight: 800;
}
/* AI 가 이어 만든 음 — **어디부터가 AI 인지 눈에 보여야** 합니다 */
.c3-note.is-ai {
  background: hsl(var(--hue) 45% 88%);
  border-style: dashed;
}
.c3-empty { color: var(--ink-3); font-size: .9rem; align-self: center; }

.c3-pads {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2);
  max-width: 460px; margin: var(--s4) auto 0;
}
.c3-pad {
  height: 84px;                        /* 손가락으로 누르는 크기 */
  font: inherit; font-weight: 800; color: var(--ink);
  background: hsl(var(--hue) 82% 74%);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--drop-2);
  cursor: pointer;
  display: grid; place-items: end center; padding-bottom: var(--s2);
}
.c3-pad:active, .c3-pad.is-hit {
  transform: translateY(4px);
  box-shadow: none;
  background: hsl(var(--hue) 90% 84%);
}

.c3-controls {
  display: flex; gap: var(--s2); justify-content: center;
  max-width: 460px; margin: var(--s3) auto 0;
}