/* =========================================================================
 *  Node 버전에서 새로 생긴 것들 (extra.css)
 *
 *  나머지 CSS 파일은 PHP 버전에서 그대로 가져온 것이라 손대지 않고,
 *  새로 생긴 요소와 규칙만 여기에 둔다.
 * ========================================================================= */

/* ── hidden 이 실제로 감추도록 ─────────────────────────────────────────
 *
 * PHP 는 감출 것을 아예 그리지 않았지만, 이제는 화면이 만들어진 뒤
 * 자바스크립트가 hidden 을 붙였다 떼었다 한다.
 *
 * 그런데 [hidden] 의 display:none 은 브라우저 기본 규칙이라
 * `.view.active{display:block}` `.pager{display:flex}` 처럼 클래스로 정한
 * 규칙에 밀린다. hidden 을 붙여도 그대로 보이는 것이다.
 * (app.css 에 `.restore-bar[hidden]` 이 따로 있는 것도 같은 이유였다)
 *
 * 요소마다 따로 막지 않도록 여기서 한 번에 정한다.
 */
[hidden] { display: none !important; }

/* ── 관리자 비밀번호 확인 창 ─────────────────────────────────────────── */

.pw-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(19, 36, 31, .45);
  backdrop-filter: blur(3px);
}
.pw-overlay.show { display: flex; }

.pw-box {
  width: 100%;
  max-width: 340px;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(14, 34, 26, .3);
  padding: 30px 26px 24px;
  text-align: center;
}
.pw-box h3 { font-size: 18px; margin: 14px 0 8px; color: var(--green); }
.pw-box p  { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; }

.pw-mark {
  width: 52px; height: 52px; margin: 0 auto;
  border-radius: 50%;
  background: #e8efdf;
  display: grid; place-items: center;
  color: var(--green);
}

.pw-field {
  width: 100%;
  border: 1px solid #ced7d0;
  border-radius: 10px;
  padding: 14px;
  font: 700 20px inherit;
  letter-spacing: 6px;
  text-align: center;
  color: var(--green);
  outline: none;
  background: #fff;
}
.pw-field:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(40, 101, 73, .1); }

.pw-msg { min-height: 18px; margin: 10px 0 0; font-size: 12px; color: #b0533f; }

/* 버튼 모양(.ghost-btn · .primary-btn)은 app.css 에 이미 있는 것을 그대로 쓴다 */
.pw-actions { display: flex; gap: 10px; margin-top: 16px; }
.pw-actions > * { flex: 1; }