.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

/* (버그 수정, 이번 작업 중 발견) 이 요소 자체에 display:flex를 지정해뒀기 때문에,
   로그인 후 JS가 hidden 속성을 줘도 브라우저 기본 규칙([hidden]{display:none})보다
   이 규칙이 우선시되어 실제로는 계속 화면에 표시되고 있었다 (로그인 후에도 빈
   로그인 카드가 화면 위쪽에 그대로 남아 관리자 설정 내용을 아래로 밀어내는 문제).
   hidden일 때는 명시적으로 다시 display:none으로 되돌려준다. */
.admin-login[hidden] {
  display: none;
}

.login-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-card h1 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--text);
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.login-card input[type="password"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text);
}

.error-text {
  color: var(--red);
  font-size: 13px;
  margin: 0;
}

.back-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  margin-top: 4px;
}

.back-link:hover {
  text-decoration: underline;
}

.admin-editor {
  /* 하단 고정 버튼 바(.admin-footer-bar)에 콘텐츠 마지막 부분이 가려지지 않도록
     여유 공간을 넉넉히 둔다. 이제 버튼 줄 + 상태 문구 줄이 항상 두 줄로 고정되어
     있으므로(.admin-footer-bar-inner 참고) 그 두 줄 높이를 넉넉히 커버하도록
     기존 140px보다 더 크게 잡았다. */
  padding: 24px 28px 170px;
  max-width: 900px;
  margin: 0 auto;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-header h1 {
  margin: 0;
  font-size: 20px;
}

.admin-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 18px;
}

.admin-section h2 {
  margin: 0 0 14px;
  font-size: 15px;
}

/* "PC 시간 동기화" 탭처럼 안내 문구(.field-hint) 바로 뒤에 버튼 하나만 오는
   레이아웃에서, 버튼이 위 문구와 너무 붙어 보이지 않도록 간격을 띄운다. */
#timeSyncBtn {
  margin-top: 14px;
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.field.inline {
  flex: 1;
  margin-bottom: 0;
  min-width: 160px;
}

.field input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  background: var(--card-bg);
}

/* 비활성화된 입력칸(고정된 관리자 이메일, 체크박스가 꺼져 있어 못 쓰는 담당자
   정보 칸 등)은 흐릿하게 + 커서 모양으로도 "지금은 못 바꾼다"는 걸 알려준다. */
.field input:disabled {
  opacity: 0.55;
  background: var(--bg);
  cursor: not-allowed;
}

.room-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  background: var(--bg);
}

.room-card-header {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.sub-section {
  margin-top: 14px;
}

.sub-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.sub-section-header h3 {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.item-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--card-bg);
}

.item-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* item-card-grid는 더 이상 자동 줄바꿈 그리드가 아니라, 그 안의 .field-row들을
   위에서 아래로 쌓는 컨테이너다. 어떤 필드끼리 한 줄에 나오는지는 .field-row로
   직접 묶어서 화면 너비와 상관없이 항상 같은 줄에 보이도록 한다. */
.item-card-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.field-row .field {
  flex: 1 1 160px;
  min-width: 140px;
  margin-bottom: 0;
}

/* 필드 줄에 같이 놓이는 버튼(예: "🌐 웹 접속")은 레이블 캡션 때문에 세로로 더 긴
   .field 옆에서 입력창과 높이가 맞도록 아래쪽으로 붙인다. */
.field-row > button {
  align-self: flex-end;
  white-space: nowrap;
}

.item-card-grid .field {
  margin-bottom: 0;
}

.field-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.field-hint + .field-hint {
  margin-top: 8px;
}

/* ---- 알림 설정 탭 - "담당자 정보" 안내(caution) 박스 ----
   이메일/문자 알림 각각의 받는사람 입력란 바로 아래에 붙어서, 체크박스를
   켜고 사이트명/업체명/담당자 정보를 입력하면 알림 제목/내용에 함께 실려
   나간다는 것을 눈에 띄는 색으로 강조한다. style.css의 --caution-* 변수를
   그대로 재사용한다(.schedule-caution-banner와 같은 색 계열). */
.contact-info-box {
  margin-top: 4px;
  margin-bottom: 8px;
  padding: 14px 16px;
  background: var(--caution-bg);
  border: 1px solid var(--caution-border);
  border-left: 4px solid var(--caution-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-info-box .checkbox-label {
  color: var(--caution-text);
  font-weight: 600;
}

.contact-info-box .field-hint {
  color: var(--caution-text);
  opacity: 0.9;
}

.contact-info-box .contact-info-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}

/* ---- 업데이트 탭 - "온라인 검색 폴더 주소 설정" 접고 펼치기 ----
   평소에는 접어두고, 공유폴더 주소를 바꿔야 할 때만 펼쳐서 수정하도록 <details>로
   감쌌다. 기본 모양(파란 삼각형 화살표)은 브라우저마다 달라서 눈에 좀 튀니, 접힌
   제목 글씨만 다른 라벨과 비슷한 톤으로 맞춰둔다. */
.update-source-settings {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.update-source-settings summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
}

.update-source-settings .field {
  margin-top: 10px;
  max-width: 480px;
}

.update-source-settings .field-hint {
  margin-top: 8px;
}

.backup-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

#backupStatus {
  margin-top: 8px;
}

.logo-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.logo-preview {
  max-height: 56px;
  max-width: 220px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  background: var(--card-bg);
}

.logo-upload-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#logoStatus {
  margin-top: 4px;
}

.btn-small {
  padding: 5px 10px;
  font-size: 12px;
}

/* ---- 저장/이동 버튼을 놓치지 않도록: 상단보다 눈에 잘 띄는 큰 저장 버튼 +
   화면을 아무리 내려도 항상 보이는 하단 고정 버튼 바 ---- */
.admin-footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  padding: 14px 16px;
  z-index: 40;
}

/* 버튼 줄과 상태 문구 줄을 완전히 분리한다. 예전에는 버튼 3개와 상태 문구가 한
   flex 줄에 같이 있어서, 문구가 길어지면(예: "오류: ...") 버튼이 밀리거나
   줄바꿈되면서 서로 겹쳐 보이는 문제가 있었다. 이제 상태 문구는 항상 버튼 아래
   자기만의 줄에서 전체 너비로 표시되므로 버튼 위치에 영향을 주지 않는다. */
.admin-footer-bar-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.admin-footer-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.admin-footer-buttons .btn {
  /* 상태 문구 줄과 분리되어 있지만, 혹시 버튼 줄 자체가 좁은 화면에서 줄바꿈되더라도
     버튼 각각의 크기가 줄어들며 찌그러지지 않도록 고정한다. */
  flex: 0 0 auto;
}

.footer-save-status {
  font-size: 13px;
  width: 100%;
  text-align: center;
  word-break: break-word;
  /* 문구가 비어 있을 때와 채워졌을 때 줄 높이가 달라지면, 바닥에 고정된
     .admin-footer-bar 전체 높이가 그만큼 바뀌면서 버튼 줄이 위아래로 미세하게
     밀리는 것처럼 보인다. 한 줄 분량의 높이를 항상 미리 확보해서 문구가 뜨고
     사라져도 버튼 위치가 흔들리지 않게 한다. */
  min-height: 18px;
}

/* ---- "저장 안 하고 나가기" 방지 확인 모달 ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

/* 위에서 이 요소 자체에 display:flex를 지정해뒀기 때문에, 그냥 두면 브라우저 기본
   스타일([hidden] { display:none })보다 이 규칙이 우선시되어 hidden 속성을 줘도
   실제로는 계속 화면에 (안 보이지만) 깔려서 클릭을 가로채는 문제가 생긴다.
   그래서 hidden일 때는 명시적으로 display:none으로 되돌려준다. */
.modal-overlay[hidden] {
  display: none;
}

.modal-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-card h2 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--text);
}

.modal-card p {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---- 비밀번호 변경 탭 ---- */
#changePasswordForm {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 360px;
}

#changePasswordForm .btn {
  align-self: flex-start;
  margin-top: 8px;
}

#changePasswordStatus {
  margin-top: 6px;
}

.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field input {
  flex: 1;
  padding-right: 38px;
}

.toggle-password-visibility {
  position: absolute;
  right: 4px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  padding: 4px 8px;
  line-height: 1;
  color: var(--muted);
  border-radius: 6px;
}

.toggle-password-visibility:hover {
  background: var(--secondary);
}

.toggle-password-visibility.active {
  color: var(--primary);
}

/* ---- 탭 (설정 / 명령 로그) ---- */
.admin-tabs {
  display: flex;
  gap: 6px;
  margin-top: 16px;
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  border: none;
  background: none;
  color: var(--muted);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-panel {
  margin-top: 0;
}

/* ---- 명령 로그: 날짜 선택 툴바 ---- */
.log-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.log-date-select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  max-width: 220px;
}

/* ---- 명령 로그: 내보내기 ---- */
.log-export-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

#logExportStatus {
  margin-top: 8px;
}

/* ---- 명령 로그 테이블 ---- */
.log-table-wrap {
  overflow-x: auto;
}

.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.log-table th,
.log-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.log-table td:last-child {
  white-space: normal;
  min-width: 200px;
}

.log-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.log-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
}

.log-badge-ok { background: #dcfce7; color: #16a34a; }
.log-badge-error { background: #fee2e2; color: #dc2626; }
.log-badge-started { background: #dbeafe; color: #2563eb; }

html[data-theme="dark"] .log-badge-ok { background: #14532d; color: #86efac; }
html[data-theme="dark"] .log-badge-error { background: #7f1d1d; color: #fca5a5; }
html[data-theme="dark"] .log-badge-started { background: #1e3a5f; color: #93c5fd; }

/* ---- 로그인 화면 (login.html) ---- */
.login-card[hidden] {
  display: none;
}
.auth-card {
  width: 360px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}
.auth-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.auth-card-top h1 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  /* overflow-wrap: anywhere는 공간이 부족할 때 "PANASONI"/"C CMS"처럼 단어 중간을
     잘라서라도 줄바꿈한다. 오른쪽 언어 선택 칸을 아래에서 고정폭으로 줄여두면
     보통은 줄바꿈 자체가 필요 없지만, 혹시라도 아주 좁은 화면에서 줄바꿈이
     필요해지면 단어(공백) 단위로만 끊기도록 word-break: keep-all로 바꾼다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.auth-card-top .language-select {
  /* 모바일 미디어쿼리의 .language-select { width: 100% } (대시보드 헤더용)가
     로그인 화면에도 그대로 적용되면서 언어 선택 칸이 카드 폭의 절반 가까이
     차지해 "PANASONIC CMS" 제목이 비좁아지고 단어 중간에서 줄바꿈되던 문제를
     고친다. 이 칸은 내용(한국어/English/日本語) 글자 폭만큼만 차지하는 최소
     크기로 고정하고, 줄어들지도 늘어나지도 않게 해서 항상 오른쪽에 작게
     붙어 있도록 한다. */
  flex: 0 0 auto;
  width: auto;
  max-width: 110px;
  padding: 4px 6px;
  font-size: 12px;
}
.auth-subtitle {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  font-weight: 600;
}
.login-card input[type="text"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text);
}
.login-card label.auth-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.login-card label[hidden] {
  display: none;
}
.auth-hint {
  margin: -6px 0 0;
}
.auth-who {
  margin: 0;
  font-size: 13px;
}

/* ---- 사용자 관리 탭 ---- */
.users-table-wrap {
  overflow-x: auto;
}
.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.users-table th,
.users-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.users-table th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.users-table .user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.users-table select {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
}
.users-table tr.is-disabled td {
  opacity: 0.55;
}
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--secondary);
  color: var(--text);
  white-space: nowrap;
}
.status-pill.ok {
  background: rgba(22, 163, 74, 0.15);
  color: var(--green);
}
.status-pill.warn {
  background: rgba(217, 119, 6, 0.15);
  color: var(--amber);
}
.status-pill.off {
  background: rgba(220, 38, 38, 0.12);
  color: var(--red);
}
.users-add-form,
.audit-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 8px;
}
.users-add-form label,
.audit-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.users-add-form input,
.users-add-form select,
.audit-form input,
.audit-form select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text);
}
.log-user-cell {
  white-space: nowrap;
}
.users-table td:nth-child(2) {
  white-space: nowrap;
}
.log-access-cell {
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}