/*
 * guest_writing.css — 비회원 닉네임·관리 비밀번호 입력과 삭제 확인창
 *
 * 비회원 글·댓글 작성자의 입력 영역과 비밀번호를 받아 삭제하는 작은 팝업입니다.
 * .guest-fields: 입력 영역 / .guest-fields-grid: 닉네임·비밀번호 배치 / .guest-fields-help: 설명
 * .guest-delete: 삭제 메뉴 / .guest-delete-form: 비밀번호 팝업 / 그 안의 button: 삭제하기
 * 비회원 입력칸의 여백, 안내 글씨, 삭제 확인창 디자인을 바꿀 때 수정하세요.
 * 이 파일에 .guest-delete 규칙이 없다면 삭제 확인창 스타일을 아직 추가하지 않은 상태입니다.
 * 기본 비밀번호와 실제 수정·삭제 권한은 CSS가 아니라 모델·컨트롤러·화면 폼에서 처리합니다.
 */
.guest-fields {
  min-width: 0;
  margin: 20px 0;
  padding: 14px;
  border: 1px solid #e0e4e9;
  border-radius: 6px;
  background: #f8f9fb;
}

.guest-fields legend {
  padding: 0 6px;
  color: #626b77;
  font-size: 13px;
}

.guest-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.guest-fields label {
  margin: 0 0 6px;
  font-size: 10px;
}

.guest-fields input {
  min-width: 0;
  background: #fff;
}

.guest-fields-help {
  margin: 10px 0 0;
  color: #777;
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .guest-fields-grid {
    grid-template-columns: 1fr;
  }
}











/* 비회원 닉네임·비밀번호 입력칸을 작은 크기로 배치 */
.guest-fields-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 300px;
  gap: 10px;
  margin-bottom: 12px;
}

.guest-fields-grid label,
.comment-compose .guest-fields-grid label {
  margin: 0 0 5px;
  font-size: 12px;
}

.guest-fields-grid input[type="text"],
.guest-fields-grid input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  height: 25px;
  min-height: 0;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
}

/* 비밀번호 입력칸 + 눈 아이콘 */
.password-field {
  position: relative;
  min-width: 0;
}

.password-field input {
  box-sizing: border-box;
  width: 100%;
  padding-right: 42px;
}

.guest-fields-grid .password-field input {
  padding-right: 42px;
}

.password-field .password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #737b87;
  transform: translateY(-50%);
}

.password-field .password-toggle:hover {
  background: #e9edf2;
  color: #252932;
}

.password-toggle svg {
  width: 19px;
  height: 10px;
}

.password-toggle:focus-visible {
  outline: 2px solid #0071e3;
}

/* 모바일에서도 두 칸을 유지하고 입력 글씨는 읽기 쉽게 */
@media (max-width: 600px) {
  .guest-fields-grid {
    max-width: 100%;
    gap: 8px;
  }

  .guest-fields-grid input[type="text"],
  .guest-fields-grid input[type="password"] {
    font-size: 16px;
  }
}