
.form-signin {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 25px;
  border-radius: 6px;
}

/* PC 화면일 때: 768px 이상 */
@media (min-width: 768px) {
  .form-signin {
    width: 40%;
    max-width: 480px; /* 선택사항: 너무 넓어지지 않도록 제한 */
  }
}

.form-signin .title {
  font-size:1.5rem;
  font-weight:800;
  color:#333;
}

.input-signin {
  position: relative;
  margin: 5px 0;
}

.input-signin input {
  width: 100%;
  padding: 16px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: none;
}

/* 기본 라벨 위치: input 안쪽 */
.input-signin label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #888;
  background-color: transparent;
  padding: 0 4px;
  pointer-events: none;
  transition: 0.3s ease all;
}

/* 포커스 또는 입력 시: 라벨이 테두리 선 위로 올라가면서 잘리지 않도록 처리 */
.input-signin input:focus + label,
.input-signin input:not(:placeholder-shown) + label {
  top: -2px;
  font-size: 12px;
  color: #333;
  background-color: white;     /* 선 위에 겹쳐도 잘리지 않게 */
  padding: 0 4px;               /* 선과 겹치는 부분 여백 확보 */
  z-index: 1;                   /* input보다 위에 표시되도록 */
}