:root {
  color-scheme: dark;
  font-family: "Pretendard", "Segoe UI", sans-serif;

  color: #f5f7ff;
  background: #070a12;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
  background: #070a12;
}

.effect-shell {
  width: 100%;
  height: 100%;
}

.stage {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;
  background: #070a12;
}

#previewImage {
  display: block;

  width: 100%;
  height: 100%;

  /*
    contain이면 정사각형 이미지 좌우에 공간이 생깁니다.
    cover는 화면을 전부 채우는 대신 위아래 일부가 잘립니다.
  */
  object-fit: cover;
  object-position: center;

  /*
    흐림 효과를 적용했을 때 이미지 가장자리가 비치지 않도록
    아주 조금 확대합니다.
  */
  transform: scale(1.02);
  transform-origin: center;

  transition: filter 100ms linear;
}

.controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  display: grid;
  gap: 8px;

  width: 100%;
  padding: 12px 18px;

  background: linear-gradient(
    to bottom,
    rgba(7, 10, 18, 0.15),
    rgba(7, 10, 18, 0.95)
  );

  backdrop-filter: blur(6px);
}

.slider-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 48px;
  gap: 12px;
  align-items: center;

  width: 100%;
  min-width: 0;
  min-height: 28px;
}

.slider-label {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

input[type="range"] {
  display: block;

  width: 100%;
  min-width: 0;
  height: 22px;

  margin: 0;
  padding: 0;

  accent-color: #f2c94c;
  cursor: pointer;
}

output {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .controls {
    padding: 8px 10px;
  }

  .slider-row {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .slider-label,
  output {
    font-size: 12px;
  }
}