.bec-photo-check {
  margin-top: 12px;
  max-width: 620px;
}
.bec-photo-guidance {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border-left: 4px solid #287bc2;
  border-radius: 5px;
  background: #f7f8fa;
  color: #354657;
}
.bec-photo-guidance strong {
  color: #20242a;
}
.bec-photo-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 9px;
  padding: 10px 12px;
  border: 1px solid #d4d9df;
  border-left-width: 4px;
  border-radius: 5px;
  background: #fff;
}
.bec-photo-result span {
  color: #536273;
}
.bec-photo-result.is-idle { border-left-color: #64748b; }
.bec-photo-result.is-checking { border-left-color: #287bc2; }
.bec-photo-result.is-success {
  border-left-color: #2e7d32;
  background: #f4fbf5;
}
.bec-photo-result.is-warning {
  border-left-color: #b45309;
  background: #fffaf0;
}
.bec-photo-result.is-error {
  border-left-color: #b91c1c;
  background: #fff7f7;
}
.bec-photo-preview-wrap {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  line-height: 0;
  max-width: 260px;
}
.bec-photo-preview {
  display: block;
  max-width: 260px;
  max-height: 340px;
  width: auto;
  height: auto;
  border: 1px solid #d4d9df;
  border-radius: 5px;
  background: #fff;
}
.bec-photo-face-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #2e7d32;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.65) inset;
}
@media (max-width: 520px) {
  .bec-photo-preview,
  .bec-photo-preview-wrap {
    max-width: 100%;
  }
}