* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif; }

.header {
  padding: 18px 16px;
  background: #000;
  color: #fff;
}
.header h1 { margin: 0 0 6px 0; font-size: 20px; }
.header p { margin: 0; opacity: 0.9; font-size: 13px; }

.container { max-width: 920px; margin: 0 auto; padding: 14px; }

.panel {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}

h2 { margin: 0 0 12px 0; font-size: 16px; }

.hint {
  font-size: 12px;
  line-height: 1.5;
  color: #555;
  margin: 8px 0 12px 0;
}

.form-row {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

/* 기존에 label min-width가 160 같은 게 있다면, 이 페이지는 일단 120을 권장 */
.form-row label {
  min-width: 120px;
  font-weight: 600;
  margin-right: 10px;
  flex-shrink: 0;
}

.form-row input[type="number"],
.form-row input[type="file"] {
  width: 100%;
  max-width: 100%;
  padding: 8px;
  height: 40px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
}

.button-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

button {
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 700;
}

button.primary { background: #000; color: #fff; border-color: #000; }
button.primary:hover { background: #222; border-color: #222; }
button.secondary { background: #f1f1f1; color: #111; border-color: #dcdcdc; }
button.secondary:hover { background: #e9e9e9; }
button.danger { background: #ffeded; color: #b10000; border-color: #ffb3b3; }
button.danger:hover { background: #ffe0e0; }

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.track-list { display: flex; flex-direction: column; gap: 10px; }

.track-row {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 10px;
  background: #fafafa;
}

.track-row.active {
  outline: 2px solid #4c84ff;
  background: #eef4ff;
}

.track-grid {
  display: grid;
  grid-template-columns: 1fr 160px 160px;
  gap: 10px;
  align-items: center;
}

.track-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.small {
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 700;
}

.file-name {
  font-size: 12px;
  color: #333;
  margin-top: 6px;
  word-break: break-all;
}

.footer {
  padding: 18px 12px;
  text-align: center;
  color: #777;
  font-size: 12px;
}

button.tap {
  background: #111;
  color: #fff;
  border-color: #111;
}

button.tap:disabled {
  background: #cfcfcf;
  color: #666;
  border-color: #cfcfcf;
  opacity: 1; /* disabled일 때도 회색이 또 흐려지지 않게 */
}


/* 모바일: 입력칸이 너무 좁아지면 1열로 */
@media (max-width: 720px) {
  .track-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }
  .form-row label {
    min-width: auto;
    margin-right: 0;
    margin-bottom: 6px;
  }
}