@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");

/* 디자인 설정 --------------------------------------------------------- */
:root {
  /* Color */
  --gray-50: #f2f4f8;
  --gray-100: #ebeef4;
  --gray-150: #dde0e6;
  --gray-300: #a2a7b0;
  --gray-500: #696e77;
  --gray-600: #4d4f58;
  --gray-900: #121319;

  --primary: #2facbd;
  --secondary: #5173fb;
  --tertiary: #b8ab9d;

  /* Typography */
  --font-primary: "Noto Sans KR", sans-serif;

  --font-regular: 400;
  --font-bold: 700;

  --line-height-12: 18px;
  --line-height-14: 21px;
  --line-height-18: 27px;
  --line-height-20: 30px;
  --line-height-28: 42px;
}

.heading1 {
  font-weight: var(--font-bold);
  font-size: 28px;
  line-height: var(--line-height-28);
}

.heading3 {
  font-weight: var(--font-bold);
  font-size: 20px;
  line-height: var(--line-height-20);
}

.subtitle1 {
  font-weight: var(--font-bold);
  font-size: 18px;
  line-height: var(--line-height-18);
}

.subtitle3 {
  font-weight: var(--font-bold);
  font-size: 14px;
  line-height: var(--line-height-14);
}

.body2 {
  font-weight: var(--font-regular);
  font-size: 14px;
  line-height: var(--line-height-14);
}

.caption1 {
  font-weight: var(--font-regular);
  font-size: 12px;
  line-height: var(--line-height-12);
}
/* --------------------------------------------------------- 디자인 설정 */

.textfield {
  position: relative;
  height: 56px;
}

.textfield input {
  width: 100%;
  height: 100%;
/*   padding: 26px 16px 10px 16px; */
  font-size: 14px;
  font-weight: var(--font-regular);
  font-family: var(--font-primary);
  line-height: var(--line-height-14);
  border: 1px solid var(--gray-150);
  color: var(--gray-900);
  border-radius: 8px;
  transition: border 0.2s;
}

/* 라벨 기본 상태 (중앙 정렬) */
.textfield label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: var(--font-regular);
  font-family: var(--font-primary);
  color: var(--gray-600);
  transition: all 0.2s ease-in-out;
  pointer-events: none; /* 클릭 방지 */
}

/* 라벨 이동 (focus 및 값 입력 후) */
.textfield input.filled + label,
.textfield input:focus + label {
  font-size: 12px;
  line-height: var(--line-height-12);
  color: var(--gray-600);
  padding-bottom: 26px;
}

.textfield input:focus {
  border: 1px solid var(--gray-600);
}

input[type="password"] {
  font: small-caption;
  font-size: 20px;
  letter-spacing: 1cqmin;
}