/*
 * settings.css — 작은 설정 팝업과 개인 배경 사진
 *
 * .settings-dialog: 팝업 크기·배경·테두리
 * .settings-field: 사진·밝기 입력 영역
 * .settings-reset: 초기화 버튼
 * #personal-background: 화면 뒤에 고정되는 개인 배경 사진
 * body.has-personal-background > main: 배경 위 본문의 읽기 쉬운 바탕
 * 메뉴 열기·사진 저장 동작은 public/settings.js에서 처리합니다.
 */

.settings-dialog {
  box-sizing: border-box;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 22px;
  overflow-y: auto;
  border: 1px solid #e0e4e9;
  border-radius: 16px;
  background: #fff;
  color: #252932;
  box-shadow: 0 16px 50px #0003;
}

.settings-dialog::backdrop {
  background: rgb(0 0 0 / 40%);
}

html:has(#settings-dialog[open]) {
  overflow: hidden;
}

.settings-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-dialog-heading h2,
.settings-dialog-heading form {
  margin: 0;
}

.settings-dialog .settings-close {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  background: #f3f5f7;
  color: #252932;
}

.settings-help,
.settings-field small {
  color: #737b87;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.settings-field {
  min-width: 0;
  margin: 22px 0;
}

.settings-field label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.settings-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  accent-color: #0071e3;
}

.settings-field input[type="range"] {
  min-height: 32px;
}

.settings-dialog .settings-reset {
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1px solid #dce1e8;
  border-radius: 8px;
  background: #f7f8fa;
  color: #414956;
  font-size: 13px;
}

button[data-settings-open] {
  box-sizing: border-box;
  width: 100%;
  border: 0;
  background: transparent;
  color: #222;
  font: inherit;
  text-align: left;
}

button[data-settings-open]:hover {
  background: #f4f6f8;
}

.settings-dialog button:focus-visible,
button[data-settings-open]:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 3px;
}

/* 개인 배경은 설정한 브라우저에서만 표시합니다. */
/* 배경 사진 전체 표시 — 화면 비율에 따라 여백이 생길 수 있음 */
#personal-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #edf0f4;
}


body.has-personal-background {
  isolation: isolate;
  background: transparent;
  min-height: 100dvh;
}

body.has-personal-background > main {
  background: rgb(255 255 255 / 94%);
  border-radius: 0 0 12px 12px;
}


/*
 * 개인 배경을 설정했을 때만 UI를 반투명하게 표시합니다.
 * 숫자가 작을수록 사진이 더 잘 보입니다.
 */
body.has-personal-background {
  --panel-opacity: 0.7;
}

/* 게시판·게시글을 감싸는 전체 바탕 */
body.has-personal-background > main {
  background: rgb(255 255 255 / var(--panel-opacity));
  border-radius: 0 0 16px 16px;
}

/* 상단 앱바 */
body.has-personal-background .app-bar {
  background: rgba(158, 72, 72, 0.8);
  border-bottom-color: rgb(255 255 255 / 35%);
}

/* 겹쳐진 흰색 바탕을 제거해 사진이 가려지지 않도록 */
body.has-personal-background .card,
body.has-personal-background .post-detail,
body.has-personal-background .comment-item {
  background: transparent;
}

/* 게시글 제목 영역과 대댓글 */
body.has-personal-background .post-detail-header,
body.has-personal-background .comment-item--reply {
  background: rgb(255 255 255 / 20%);
}

/* 댓글 작성 영역·비회원 입력 영역 */
body.has-personal-background .comment-compose,
body.has-personal-background .guest-fields {
  background: rgb(255 255 255 / 35%);
}

/* 입력창은 읽기 쉽도록 조금 더 불투명하게 */
body.has-personal-background input[type="text"],
body.has-personal-background input[type="email"],
body.has-personal-background input[type="password"],
body.has-personal-background textarea,
body.has-personal-background #editor {
  background: rgb(255 255 255 / 85%);
}

/* 설정·회원 메뉴는 조작하기 편하도록 선명하게 유지 */
body.has-personal-background .settings-dialog,
body.has-personal-background .account-drawer,
body.has-personal-background .guest-delete-form {
  background: rgb(255 255 255 / 95%);
}