/* 관리자 화면. style.css 위에 얹는다 — 같은 디자인 언어(스티커·말풍선)를 쓴다.
   ⚠️ 사용자 화면은 폰 한 손이 기준인데 여기는 **PC 에서 링크를 열어보는 화면**이다.
      그래서 여기만 폭을 넓게 쓰고 스크롤을 body 에 준다. */

body.admin { overflow:auto; }
.wrap {
  max-width:56rem; margin:0 auto;
  padding:1.4rem 1.05rem calc(env(safe-area-inset-bottom) + 3rem);
}
.ahead {
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; margin-bottom:1.6rem;
}
/* ← 앱으로. ⚠️ `<a>` 라 버튼 규칙을 안 받는다 — 같은 크기로 보이게 직접 적는다. */
.ahead .backapp {
  flex:0 0 auto; text-decoration:none; white-space:nowrap;
  padding:.45rem .8rem; font-size:.82rem; font-weight:800;
  border:var(--line); border-radius:var(--r-pill);
  background:var(--sheet); color:var(--ink-2); box-shadow:var(--pop-sm);
}
.ahead .backapp:active { transform:translate(2px,2px); box-shadow:none; }
.block { margin-bottom:2.4rem; }
.block .tip { margin-bottom:.9rem; }

/* 요약 숫자 */
.sums { display:flex; gap:.5rem; flex-wrap:wrap; margin:.2rem 0 .9rem; }
.sum {
  flex:1 1 8rem; background:var(--sheet); border:var(--line); box-shadow:var(--pop-sm);
  border-radius:16px; padding:.7rem .85rem;
}
.sum b { display:block; font-family:var(--round); font-size:1.6rem; line-height:1.1; }
.sum span { font-size:.75rem; font-weight:800; color:var(--ink-2); }
.sum.hot { background:var(--hot); color:var(--hot-ink); }
.sum.hot span { color:var(--hot-ink); }
.sum.cash { background:var(--butter); }

/* 제출 한 줄 */
.claims { display:flex; flex-direction:column; gap:.5rem; }
.claim {
  display:flex; align-items:center; gap:.8rem; background:var(--sheet);
  border:var(--line); box-shadow:var(--pop-sm); border-radius:18px; padding:.7rem .85rem;
}
.claim[data-status="approved"] { background:var(--hot-soft); }
.claim[data-status="rejected"] { opacity:.5; }
.cmeta { flex:1; min-width:0; }
.cmeta b { display:block; font-size:.9rem; font-weight:800; }
.cmeta span { display:block; font-size:.72rem; color:var(--ink-3); margin:.15rem 0; }
.cmeta a {
  display:block; font-size:.76rem; color:var(--hot); font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cacts { display:flex; gap:.35rem; flex:0 0 auto; }
.ctag { font-size:.76rem; font-weight:800; color:var(--ink-3); }

/* 배경음 */
.moods { display:flex; flex-direction:column; gap:.7rem; }
.moodcard {
  background:var(--sheet); border:var(--line); box-shadow:var(--pop-sm);
  border-radius:var(--r-card); padding:.9rem 1rem;
}
.mhead { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.6rem; }
.mhead b { font-size:.95rem; font-weight:800; }
.mhead a { font-size:.78rem; color:var(--hot); font-weight:800; }
.upload {
  margin-left:auto; background:var(--butter); border:2px solid var(--ink);
  box-shadow:var(--pop-sm); border-radius:var(--r-pill);
  padding:.42rem .85rem; font-size:.8rem; font-weight:800; cursor:pointer;
}
.upload:active { transform:translate(2px,2px); box-shadow:none; }
.track {
  display:flex; align-items:center; gap:.6rem; padding:.4rem 0;
  border-top:2px solid var(--paper);
}
.tname { flex:0 0 32%; font-size:.82rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track audio { flex:1; min-width:0; height:2.1rem; }
.empty.sm { padding:1rem 0; font-size:.82rem; }

#lock { max-width:26rem; padding-top:14vh; }
#lock .joinrow { margin-top:1rem; }
#lock .tip { text-align:center; color:var(--hot); font-weight:700; }

@media (max-width:34rem) {
  .claim { flex-direction:column; align-items:stretch; }
  .cacts { justify-content:flex-end; }
  .tname { flex-basis:100%; }
  .track { flex-wrap:wrap; }
}

/* 비밀번호 — 접어둔다. 늘 펼쳐두면 자리만 먹고 어깨너머로 볼 일만 는다. */
.pwbox summary {
  font-size:.9rem; font-weight:800; cursor:pointer; list-style:none;
  padding:.6rem 0; color:var(--ink-2);
}
.pwbox summary::-webkit-details-marker { display:none; }
.pwbox summary::before { content:"＋ "; color:var(--hot); font-weight:900; }
.pwbox[open] summary::before { content:"− "; }
.pwbox .field { margin-bottom:.45rem; }
.pwbox button { width:100%; }

/* 🔔 오늘 볼 것 — ⚠️ 아홉 칸을 다 내려봐야 할 일이 있는지 알 수 있었다.
   ⚠️ **0 인 것은 안 띄운다.** 늘 떠 있는 「신고 0」은 배경이 되고, 진짜 1이
      됐을 때도 안 읽힌다. */
.todo {
  display:flex; flex-wrap:wrap; gap:.45rem; margin:-.8rem 0 1.6rem;
}
.todo[hidden] { display:none; }
.todochip {
  text-decoration:none; white-space:nowrap;
  padding:.42rem .85rem; font-size:.85rem; font-weight:800;
  border:var(--line); border-radius:var(--r-pill); box-shadow:var(--pop-sm);
  background:var(--hot); color:#fff;
}
.todochip.bad { background:var(--sheet); color:var(--bad); }
.todochip:active { transform:translate(2px,2px); box-shadow:none; }
/* 할 일이 없을 때. ⚠️ 회색으로 조용히 — 이건 좋은 소식이지 알림이 아니다. */
.todonone { margin:0; font-size:.85rem; font-weight:700; color:var(--ink-3); }

/* 회원 목록 — 접어둔다. ⚠️ 이 화면은 이미 길다. 평소에 필요한 건 **몇 명인지**고,
   한 명씩 봐야 할 때만 편다. 접힌 줄에도 숫자가 적혀 있어야 접어둔 값이 있다. */
.fold summary {
  font-size:.9rem; font-weight:800; cursor:pointer; list-style:none;
  padding:.6rem 0; color:var(--ink-2);
}
.fold summary::-webkit-details-marker { display:none; }
.fold summary::before { content:"＋ "; color:var(--hot); font-weight:900; }
.fold[open] summary::before { content:"− "; }
/* 제목 옆 숫자 — 펴지 않아도 읽힌다. */
.eyebrow .quiet { font-weight:700; color:var(--ink-3); letter-spacing:0; }
#showDone { margin-top:.6rem; }
#showDone[hidden] { display:none; }

/* ── 미션 넣기 ──
   ⚠️ 칸을 한 줄에 하나씩 세로로 쌓는다. 관리자 화면이라고 좁게 밀어넣으면
      대사를 적다가 뭘 적는 칸인지 잃는다. */
.mform { display:flex; flex-direction:column; gap:.45rem; margin-bottom:.8rem; }
.mform .field {
  width:100%; font:inherit; font-size:.9rem; padding:.55rem .7rem;
  border:2px solid var(--edge, #1A1A1A); border-radius:12px;
  background:#fff; color:inherit;
}
.mform textarea.field { resize:vertical; line-height:1.5; }
.mrow { display:flex; gap:.45rem; }
.mrow .field { flex:1; min-width:0; }
/* 목록의 끄기·지우기 */
#missions .claim button { margin:.4rem .35rem 0 0; }

/* ── ✨ 대본 뽑기 ──
   ⚠️ **아래 「미션 넣기」와 눈에 띄게 구분한다.** 같은 모양이면 여기서 만든 것이
      이미 들어간 줄 안다 — 이건 **채워주기만** 하는 자리다. */
.mform.curate {
  background:#FFF8F2; border:2px dashed var(--edge, #1A1A1A);
  border-radius:14px; padding:.7rem; margin-bottom:1rem;
}
.eyebrow.sm { font-size:.82rem; }
.eyebrow.sm .quiet { font-weight:700; opacity:.6; }
/* ⚠️ 결과·오류는 **누른 자리 바로 밑**이다. 이 화면은 길어서 토스트가 화면 맨
   아래에 뜨는데, 뽑기 칸은 위에 있다 — 답이 화면 밖에 있으면 안 누른 것과 같다. */
.custatus {
  margin:.5rem 0 0; padding:.5rem .7rem; border-radius:12px;
  background:var(--sheet); border:2px solid var(--edge, #1A1A1A);
  font-size:.84rem; font-weight:700; line-height:1.55; white-space:pre-wrap;
}
.custatus[data-bad] { color:#D93A2B; border-color:#D93A2B; }
.custatus[hidden] { display:none; }

.drafts { display:flex; flex-direction:column; gap:.45rem; margin-top:.5rem; }
.drafts:empty { display:none; }
.draft {
  background:#fff; border:2px solid var(--edge, #1A1A1A); border-radius:12px;
  padding:.55rem .7rem;
}
.draft b { display:block; font-size:.92rem; }
.draft p { margin:.25rem 0 .45rem; font-size:.84rem; line-height:1.6; opacity:.85; }
/* 규칙을 어긴 것은 **지우지 않고 표시한다** — 한 글자만 고치면 되는 게 많다. */
.draft .warn {
  display:block; font-style:normal; font-size:.76rem; font-weight:800; color:#D93A2B;
  margin-top:.15rem;
}
.cta.sm { padding:.35rem .7rem; font-size:.8rem; }