/*
 * 비밀번호 입력 도우미 — 「입력내용 보기」 단추와 「조건 확인」 목록.
 *
 * 가입·로그인(login.ejs), 비밀번호 찾기(findForm.ejs), 내 정보 수정(profile.ejs)이 함께 쓴다.
 * 세 화면의 칸 모양이 달라서(직접 꾸민 칸 · 부트스트랩 input-group · 부트스트랩 form-control)
 * 단추를 놓는 자리만 아래에서 갈래로 나눠 둔다.
 */

/* ---------- 입력내용 보기 단추 ---------- */
.kw-pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #9ca3af;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.kw-pw-toggle:hover {
  color: #0b70f5;
  background: #eff6ff;
}
.kw-pw-toggle[aria-pressed="true"] {
  color: #0b70f5;
}
.kw-pw-toggle:focus-visible {
  outline: 2px solid #0b70f5;
  outline-offset: 2px;
}

/* 부트스트랩 칸을 감싸는 자리 — 단추를 칸 안에 띄우기 위한 기준점 */
.kw-pw-field {
  position: relative;
}
.kw-pw-field > .form-control,
.input-group > .form-control.kw-pw-input {
  padding-right: 52px;
}
/* input-group 은 부트스트랩이 이미 position: relative 이라 기준점이 따로 필요 없다 */
.input-group > .kw-pw-toggle {
  z-index: 5;
}
/* 부트스트랩 칸은 높이가 낮아 44px 단추가 넘칠 수 있다 */
.kw-pw-field > .kw-pw-toggle,
.input-group > .kw-pw-toggle {
  width: 40px;
  height: 38px;
}

/* ---------- 조건 확인 목록 ---------- */
/*
 * 한 줄에 표시 하나, 글 하나. 숫자 배지나 색 꼬리표 없이 단순하게 둔다.
 * 아직 입력하지 않았으면 회색 줄표, 충족하면 초록 체크, 모자라면 빨간 X.
 */
/* display: grid 가 hidden 보다 세서, 숨길 때는 따로 꺼 줘야 한다 */
.kw-pw-rules[hidden],
.kw-pw-match[hidden] {
  display: none;
}
.kw-pw-rules {
  margin-top: 8px;
  padding: 10px 13px;
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  background: #fff;
  display: grid;
  gap: 6px;
}
.kw-pw-rules__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
  color: #6b7684;
  transition: color 0.15s ease;
}
.kw-pw-rules__ic {
  flex: 0 0 auto;
  width: 1rem;
  margin-top: 1px;
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
  color: #cbd5e1;
  transition: color 0.15s ease;
}
.kw-pw-rules__row[data-state="ok"] {
  color: #334155;
}
.kw-pw-rules__row[data-state="ok"] .kw-pw-rules__ic {
  color: #16a34a;
}
.kw-pw-rules__row[data-state="no"] {
  color: #6b7684;
}
.kw-pw-rules__row[data-state="no"] .kw-pw-rules__ic {
  color: #ef4444;
}

/* ---------- 비밀번호 확인 일치 여부 ---------- */
.kw-pw-match {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
}
.kw-pw-match[data-state="ok"] {
  color: #15803d;
}
.kw-pw-match[data-state="no"] {
  color: #dc2626;
}