/* 관리자 편집모드 — 사이트의 검정·금색을 그대로 쓴다.
   방문자에게는 우측 상단 「관리자」 글자 하나만 보인다. */
.admin-bar { display:flex; align-items:center; gap:8px; margin-left:14px; }
.admin-who { font-size:12px; letter-spacing:.02em; color:#8d8madd; color:rgba(233,226,210,.55); white-space:nowrap; }

.admin-entry {
  appearance:none; border:1px solid rgba(218,190,134,.32); background:transparent;
  color:rgba(233,226,210,.78); font:inherit; font-size:12.5px; letter-spacing:.02em;
  padding:7px 13px; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.admin-entry:hover { border-color:rgba(218,190,134,.7); color:#efe6d2; }
.admin-entry:focus-visible { outline:2px solid #dabe86; outline-offset:2px; }
.admin-entry[disabled] { opacity:.45; cursor:default; }
.admin-entry-quiet { border-color:rgba(233,226,210,.16); color:rgba(233,226,210,.5); }
.admin-entry-hot { background:#dabe86; border-color:#dabe86; color:#141414; font-weight:700; }
.admin-entry-hot:hover { background:#efd5a4; color:#141414; }

/* ── 시트 ────────────────────────────────────────────────────────────── */
.admin-backdrop {
  position:fixed; inset:0; z-index:120; background:rgba(6,6,7,.78);
  display:flex; align-items:center; justify-content:center; padding:16px;
  backdrop-filter:blur(3px);
}
.admin-sheet {
  width:min(420px,100%); max-height:min(88vh,900px); overflow:auto;
  background:#131314; border:1px solid rgba(218,190,134,.22); border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.6); color:#e9e2d2;
}
.admin-sheet-wide { width:min(560px,100%); }
.admin-sheet-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 16px 10px; border-bottom:1px solid rgba(233,226,210,.1);
}
.admin-sheet-head h2 { margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em; color:#f1e9d7; }
.admin-x { appearance:none; border:0; background:transparent; color:rgba(233,226,210,.55); font-size:15px; cursor:pointer; padding:4px 6px; border-radius:8px; }
.admin-x:hover { color:#efe6d2; }
.admin-sheet-body { padding:14px 16px 18px; display:flex; flex-direction:column; gap:12px; }

.admin-form { display:flex; flex-direction:column; gap:12px; }
.admin-field { display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:rgba(233,226,210,.62); }
.admin-field input, .admin-field textarea {
  width:100%; box-sizing:border-box; font:inherit; font-size:14px; color:#f1e9d7;
  background:#0d0d0e; border:1px solid rgba(233,226,210,.16); border-radius:10px; padding:10px 12px;
}
.admin-field input:focus, .admin-field textarea:focus { outline:none; border-color:rgba(218,190,134,.6); }
.admin-field textarea { resize:vertical; line-height:1.6; }

.admin-primary {
  appearance:none; border:0; border-radius:10px; background:#dabe86; color:#141414;
  font:inherit; font-size:14px; font-weight:700; padding:11px 14px; cursor:pointer;
}
.admin-primary:hover { background:#efd5a4; }
.admin-primary[disabled] { opacity:.5; cursor:default; }
.admin-ghost {
  appearance:none; border:1px solid rgba(218,190,134,.38); border-radius:10px; background:transparent;
  color:#e7d8b4; font:inherit; font-size:13.5px; padding:10px 14px; cursor:pointer;
}
.admin-ghost:hover { background:rgba(218,190,134,.1); }

/* 비밀번호 «보기» 줄 — 가린 칸을 잠깐 눈으로 확인한다(오타로 잠기는 것을 막는다). */
.admin-peek {
  display:flex; align-items:center; gap:8px; margin:-2px 0 2px;
  font-size:12.5px; color:rgba(233,226,210,.6); cursor:pointer; user-select:none;
}
.admin-peek input { accent-color:#dabe86; width:16px; height:16px; margin:0; cursor:pointer; }
.admin-peek:hover { color:#e7d8b4; }

.admin-note { margin:0; font-size:12.5px; line-height:1.65; color:rgba(233,226,210,.55); }
.admin-note-bad { color:#e39a9a; }
.admin-note-warn { color:#dabe86; }

/* ── 사진 자르기 ─────────────────────────────────────────────────────── */
.crop-stage { display:flex; justify-content:center; padding:6px 0 2px; }
.crop-frame {
  position:relative; width:186px; aspect-ratio:1 / 2.2126;
  border-radius:20px; overflow:hidden; background:#090909;
  box-shadow:0 0 0 7px #1b1b1d, 0 0 0 8px rgba(218,190,134,.35), 0 18px 40px rgba(0,0,0,.55);
}
.crop-canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
.crop-canvas:active { cursor:grabbing; }
.crop-zoom { width:100%; accent-color:#dabe86; }

/* ── 카드 위 편집 손잡이 ─────────────────────────────────────────────── */
.admin-card-tools { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.admin-chip {
  appearance:none; border:1px solid rgba(218,190,134,.4); background:rgba(218,190,134,.08);
  color:#e7d8b4; font:inherit; font-size:12px; padding:6px 11px; border-radius:999px; cursor:pointer;
}
.admin-chip:hover { background:rgba(218,190,134,.18); }
/* ⚠ 편집 중이라고 카드에 점선을 두르지 않는다(재민 2026-09-12 — 여백엔 폰만).
   편집 중임은 «사진 바꾸기 · 글 고치기» 손잡이가 뜨는 것으로 충분히 보인다. */

/* ── 알림 ────────────────────────────────────────────────────────────── */
.admin-toast {
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:130;
  background:#17171a; border:1px solid rgba(218,190,134,.3); color:#efe6d2;
  padding:11px 16px; border-radius:999px; font-size:13px; box-shadow:0 14px 36px rgba(0,0,0,.5);
  opacity:0; transition:opacity .24s ease, transform .24s ease; pointer-events:none; max-width:min(90vw,460px); text-align:center;
}
.admin-toast.on { opacity:1; transform:translate(-50%,0); }
.admin-toast-bad { border-color:rgba(227,154,154,.5); color:#f0d3d3; }

@media (max-width:700px) {
  .admin-bar { margin-left:8px; gap:6px; }
  .admin-who { display:none; }
  .admin-entry { padding:6px 10px; font-size:12px; }
  .crop-frame { width:156px; }
}

/* ⚠ 폴드 커버처럼 320px 밖에 안 되는 화면에서는 「관리자」 버튼이 들어오면서
   머리줄이 20px 넘쳐 가로 스크롤이 생긴다(2026-09-12 실측 — 배포본도 같았다).
   좁을 때만 머리줄을 조여 넘침을 없앤다. 버튼은 그대로 누를 수 있다. */
@media (max-width:380px) {
  .site-header { gap:10px; }
  .site-header .brand { font-size:20px; }
  .site-header .brand img { width:24px; height:24px; }
  .header-contact { gap:8px; }
  .admin-bar { margin-left:0; gap:5px; }
  .admin-entry { padding:6px 9px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .admin-toast { transition:none; }
}
