.copy-box {
  border: 1px solid #e0e0e0;
  background: #f7f7f7;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 12px 0;
}

.copy-box-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.copy-box-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.4;
  background: #ffffff;
  border: 1px dashed #d6d6d6;
  border-radius: 8px;
  padding: 6px 8px;
  flex: 1 1 auto;
  word-break: break-all;
}

.copy-box-button {
  border: 1px solid #333333;
  background: #ffffff;
  color: #222222;
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 96px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  flex: 0 0 auto;
}

.copy-box-button:active {
  transform: translateY(1px);
}

.copy-box-button.is-copied {
  background: #e7f6ec;
  border-color: #2e8b57;
  color: #1f6b41;
}

.copy-box-button.is-failed {
  background: #fdecec;
  border-color: #b33636;
  color: #8b2222;
}

.copy-box.is-disabled {
  opacity: 0.55;
}

.copy-box.is-disabled .copy-box-button {
  cursor: not-allowed;
  background: #eeeeee;
  border-color: #999999;
  color: #666666;
}

.copy-box-note {
  margin-top: 6px;
  font-size: 12px;
  color: #666666;
}

@media (max-width: 480px) {
  .copy-box-row {
    flex-direction: column;
    align-items: stretch;
  }

  .copy-box-button {
    width: 100%;
  }
}