/* app.css — SNS 리워드 자동 발행 플랫폼
 *
 * 색상은 설계 §13.1 의 표 그대로다. 표 밖의 파란 hex 를 추가하지 않는다
 * (CLAUDE.md 색상 표준 — #3b82f6 등 tailwind 계열 금지).
 * 아이콘은 인라인 SVG 만 쓴다. 이모지 금지.
 *
 * ★ color-scheme: light 를 못박는다. 안 두면 브라우저가 다크 모드에서 입력 요소를
 *   제 마음대로 어둡게 칠해 흰 배경 위에 검은 입력이 얹힌다.
 */

:root {
  color-scheme: light;

  --primary: #4a9eff;
  --primary-hover: #3a8eef;
  --primary-deep: #2A7DD4;
  --primary-tint: #E4F2FD;

  --success: #48BE1D;
  --success-tint: #EAF7E6;
  --danger: #E82E2E;
  --danger-soft: #F45353;
  --danger-tint: #FEF2F2;
  --warn: #B45309;
  --warn-tint: #FEF7E6;

  --t1: #121212;
  --t2: #1F2937;
  --t3: #4B5563;
  --t4: #6B7280;
  --t5: #9CA3AF;

  --line: #E5E7EB;
  --surface: #FFFFFF;
  --page: #F3F4F6;

  --radius: 12px;
  --radius-sm: 8px;
  --nav-w: 208px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--t2);
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--primary-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── 레이아웃 ─── */

/* ★★ `hidden` 속성은 UA 스타일시트의 `display:none` 으로 동작한다. 그런데 아래
   `button, .btn { display: inline-flex }` 처럼 **작성자 규칙이 display 를 정하면 그쪽이 이긴다** —
   `el.hidden = true` 를 해도 그대로 보인다. 실제로 로그인한 회원에게 자기 이메일 옆에
   "로그인 · 회원가입" 버튼이 계속 떠 있었다(2026-08-31 VM2 실기에서 발견. API 검사로는
   안 잡힌다 — DOM 속성은 정상이었고 화면만 틀렸다). 한 줄로 전역에서 막는다. */
[hidden] { display: none !important; }

.app { display: flex; min-height: 100vh; }

.side {
  width: var(--nav-w);
  flex: 0 0 var(--nav-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 18px 0 40px;
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px 16px;
  font-size: 17px; font-weight: 700; color: var(--primary);
  letter-spacing: -0.2px;
}
.brand svg { flex: 0 0 auto; }
/* ★ 로고가 `a` 가 되면서 전역 링크 스타일(밑줄·색)이 붙는다. 원래 모습 그대로 두되
   누를 수 있다는 것만 보이게 한다 (hover 시 살짝 진하게). */
a.brand { text-decoration: none; cursor: pointer; }
a.brand:hover { color: var(--primary-deep); text-decoration: none; }

.nav-group { padding: 10px 0 2px; }
.nav-group > h3 {
  margin: 0; padding: 0 18px 6px;
  font-size: 11px; font-weight: 700; color: var(--t5);
  letter-spacing: 0.4px; text-transform: uppercase;
}

.nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 18px;
  color: var(--t3); font-size: 13.5px;
  border-left: 3px solid transparent;
}
.nav a:hover { background: var(--page); text-decoration: none; color: var(--t1); }
.nav a.on {
  color: var(--primary-deep); font-weight: 700;
  background: var(--primary-tint); border-left-color: var(--primary);
}
.nav a svg { flex: 0 0 auto; opacity: .8; }
.nav .badge {
  margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}

.side-foot { margin-top: auto; padding: 16px 18px 0; font-size: 12px; color: var(--t5); }
.side-foot a { color: var(--t4); }

.main { flex: 1 1 auto; min-width: 0; }

.topbar {
  height: 56px; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 22px;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { margin: 0; font-size: 16px; font-weight: 700; color: var(--t1); }
.topbar .spacer { flex: 1 1 auto; }
.topbar .who { font-size: 12.5px; color: var(--t4); }

.burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--t3); }

.page { padding: 22px; max-width: 1100px; }
.page > .lead { margin: -4px 0 18px; color: var(--t4); font-size: 13px; }

/* ─── 카드 ─── */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin: 0 0 16px;
}
.card > h2 {
  margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--t1);
  display: flex; align-items: center; gap: 8px;
}
.card > h2 .sub { font-size: 12px; font-weight: 400; color: var(--t5); }
.card > .hint { margin: 0 0 14px; font-size: 12.5px; color: var(--t4); }
.card.tight { padding: 14px 16px; }

.grid { display: grid; gap: 14px; }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .k { font-size: 12px; color: var(--t4); margin: 0 0 6px; }
.stat .v { font-size: 25px; font-weight: 700; color: var(--t1); line-height: 1.2; }
.stat .v small { font-size: 13px; font-weight: 400; color: var(--t4); margin-left: 3px; }
.stat .m { font-size: 12px; color: var(--t5); margin: 4px 0 0; }
.stat.accent .v { color: var(--primary-deep); }
.stat.warn .v { color: var(--danger); }

/* ─── 표 ─── */

table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
table.list th {
  text-align: left; font-weight: 700; color: var(--t4); font-size: 12px;
  padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.list td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr:last-child td { border-bottom: 0; }
table.list td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* ─── 배지 ─── */

.badge-s {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.s-draft      { background: #F3F4F6; color: var(--t3); border-color: var(--line); }
.s-pending    { background: var(--warn-tint); color: var(--warn); border-color: #F5D9A0; }
.s-approved   { background: var(--primary-tint); color: var(--primary-deep); border-color: #BFE0FB; }
.s-queued     { background: var(--primary-tint); color: var(--primary-deep); border-color: #BFE0FB; }
.s-publishing { background: var(--primary-tint); color: var(--primary-deep); border-color: #BFE0FB; }
.s-published  { background: var(--success-tint); color: #3A9615; border-color: #C6E9B8; }
.s-rejected   { background: var(--danger-tint); color: var(--danger); border-color: #F8C9C9; }
.s-expired    { background: #F3F4F6; color: var(--t4); border-color: var(--line); }
.s-failed     { background: var(--danger-tint); color: var(--danger); border-color: #F8C9C9; }
.s-cancelled  { background: #F3F4F6; color: var(--t4); border-color: var(--line); }

/* 캠페인 상태 — 게시물 상태와 코드가 겹치지 않는 것만 더한다 */
.s-review        { background: var(--warn-tint); color: var(--warn); border-color: #F5D9A0; }
.s-recruiting    { background: var(--success-tint); color: #3A9615; border-color: #C6E9B8; }
.s-in_progress   { background: var(--primary-tint); color: var(--primary-deep); border-color: #BFE0FB; }
.s-review_closed { background: #F3F4F6; color: var(--t3); border-color: var(--line); }
.s-complete      { background: #F3F4F6; color: var(--t4); border-color: var(--line); }

.ch { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
      background: #F3F4F6; color: var(--t3); border: 1px solid var(--line); white-space: nowrap; }

.muted { color: var(--t5); font-size: 12.5px; }
td.plus  { color: #3A9615; font-weight: 700; font-variant-numeric: tabular-nums; }
td.minus { color: var(--danger); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ─── 캠페인 카드 ─── */

.camp-list { display: grid; gap: 12px; }
.camp {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; background: var(--surface);
}
.camp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.camp-title { font-size: 15.5px; font-weight: 700; color: var(--t1); }
.camp-title:hover { color: var(--primary-deep); }
.camp-meta { display: flex; gap: 12px; flex-wrap: wrap; margin: 7px 0 0; font-size: 12.5px; color: var(--t4); }
.camp-meta .dday { color: var(--success); font-weight: 700; }
.camp-offer { margin: 9px 0 0; font-size: 13.5px; color: var(--t3); line-height: 1.6; }
.camp-pay {
  display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 0; padding: 9px 12px;
  background: var(--page); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--t3);
}
.camp-pay b { color: var(--primary-deep); font-size: 14px; }
.camp-pay em { font-style: normal; color: var(--t5); font-size: 11.5px; display: block; margin-top: 2px; }

/* ─── 발행 대상 선택 ─── */

label.tgt {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 0 7px; background: var(--surface);
}
label.tgt:hover { border-color: var(--primary); }
label.tgt input { margin-top: 3px; flex: 0 0 auto; width: auto; }
.tgt-b { display: block; min-width: 0; }
.tgt-t { display: block; font-size: 13.5px; color: var(--t2); font-weight: 700; }
.tgt-s { display: block; font-size: 12px; color: var(--t5); margin-top: 3px; }

/* ─── 업로드한 미디어 ─── */

.mrow {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 0 0 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--page);
}
.mpath { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--t3); word-break: break-all; }

/* ─── 폼 ─── */

label.f { display: block; margin: 0 0 12px; }
label.f > span { display: block; font-size: 12.5px; color: var(--t3); margin: 0 0 5px; font-weight: 700; }
label.f > span em { font-style: normal; font-weight: 400; color: var(--t5); }

input[type=text], input[type=email], input[type=url], input[type=password],
input[type=number], input[type=datetime-local], select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 11px; font-size: 14px; font-family: inherit; color: var(--t2);
  background: var(--surface); line-height: 1.5;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primary-tint); outline-offset: 0; border-color: var(--primary);
}
input:disabled, select:disabled, textarea:disabled { background: #F9FAFB; color: var(--t5); }
textarea { resize: vertical; min-height: 90px; }
textarea.big { min-height: 260px; }

fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 12px; }
legend { font-size: 12px; color: var(--t4); padding: 0 6px; font-weight: 700; }
label.chk { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; padding: 4px 0; cursor: pointer; }
label.chk input { margin-top: 4px; flex: 0 0 auto; width: auto; }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 200px; min-width: 0; }
.row.tight { gap: 8px; }

.counter { font-size: 11.5px; color: var(--t5); text-align: right; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.counter.over { color: var(--danger); font-weight: 700; }

/* ─── 버튼 ─── */

button, .btn {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 15px; font-size: 13.5px; font-weight: 700; font-family: inherit;
  background: var(--surface); color: var(--t2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
button:hover, .btn:hover { background: #F9FAFB; text-decoration: none; }
button.primary, .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
button.primary:hover, .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
button.danger { color: var(--danger); border-color: var(--danger); background: var(--surface); }
button.danger:hover { background: var(--danger-tint); }
button.ghost { border-color: transparent; background: transparent; color: var(--t3); }
button.ghost:hover { background: var(--page); }
button.sm { padding: 5px 10px; font-size: 12px; }
button:disabled { background: #F3F4F6; color: var(--t5); border-color: var(--line); cursor: default; }
button:disabled:hover { background: #F3F4F6; }
.btns { display: flex; gap: 9px; flex-wrap: wrap; margin: 16px 0 0; }
.btns.end { justify-content: flex-end; }

/* ─── 알림 ─── */

.note { border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13px; margin: 0 0 14px; border: 1px solid; }
.note.info { background: var(--primary-tint); border-color: #BFE0FB; color: var(--primary-deep); }
.note.good { background: var(--success-tint); border-color: #C6E9B8; color: #3A9615; }
.note.bad  { background: var(--danger-tint); border-color: #F8C9C9; color: var(--danger); }
.note.warn { background: var(--warn-tint); border-color: #F5D9A0; color: var(--warn); }
.note b { font-weight: 700; }
.note p { margin: 6px 0 0; }
.note ul { margin: 6px 0 0; padding-left: 18px; }

.empty { padding: 34px 16px; text-align: center; color: var(--t5); font-size: 13px; }
.empty p { margin: 0 0 10px; }

.toast-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--t1); color: #fff; padding: 11px 15px; border-radius: var(--radius-sm);
  font-size: 13px; max-width: 380px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.toast.bad { background: var(--danger); }
.toast.good { background: #3A9615; }

/* ─── 진행 막대 ─── */

.bar { height: 8px; background: var(--line); border-radius: 5px; overflow: hidden; margin: 8px 0 0; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 5px; }
.bar > i.hot { background: var(--danger); }

/* ─── 미리보기 ─── */

.preview { white-space: pre-wrap; word-break: break-word; font-size: 14px; color: var(--t2); margin: 0; }
.preview-title { font-weight: 700; font-size: 15px; color: var(--t1); margin: 0 0 8px; }
.tags { margin: 10px 0 0; color: var(--primary-deep); font-size: 12.5px; word-break: break-all; }
.media-list { margin: 10px 0 0; font-size: 12px; color: var(--t4); word-break: break-all; }

/* ─── 캘린더 ─── */

.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th { font-size: 12px; color: var(--t4); padding: 7px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.cal td { border: 1px solid var(--line); vertical-align: top; height: 96px; padding: 5px 6px; }
.cal td.out { background: #FAFAFA; }
.cal .d { font-size: 11.5px; color: var(--t4); font-variant-numeric: tabular-nums; }
.cal td.today .d { color: var(--primary-deep); font-weight: 700; }
.cal td.sun .d { color: var(--danger); }
.cal .ev {
  display: block; font-size: 11px; padding: 2px 5px; border-radius: 4px; margin: 3px 0 0;
  background: var(--primary-tint); color: var(--primary-deep);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.cal .ev.done { background: var(--success-tint); color: #3A9615; }
.cal .ev.bad { background: var(--danger-tint); color: var(--danger); }
.cal-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.cal-head .m { font-size: 15px; font-weight: 700; color: var(--t1); min-width: 108px; text-align: center; }

/* ─── 로그인 ─── */

.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth { width: 100%; max-width: 380px; }
.auth .brand { justify-content: center; padding: 0 0 18px; font-size: 20px; }
.auth .card { padding: 24px; }
.auth .switch { text-align: center; margin: 14px 0 0; font-size: 12.5px; color: var(--t4); }
.auth .switch button { background: none; border: 0; color: var(--primary-deep); font-size: 12.5px; padding: 0 2px; }
.auth .switch button:hover { background: none; text-decoration: underline; }
.auth .terms { font-size: 12px; color: var(--t4); }

/* ─── 문서 페이지 (약관/방침) ─── */

.doc { max-width: 780px; margin: 0 auto; padding: 28px 18px 80px; }
.doc h1 { font-size: 21px; color: var(--t1); margin: 0 0 6px; }
.doc h2 { font-size: 15px; color: var(--t1); margin: 26px 0 8px; }
.doc p, .doc li { font-size: 14px; color: var(--t2); }
.doc .updated { color: var(--t5); font-size: 12.5px; margin: 0 0 22px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.doc th, .doc td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; }
.doc th { background: #F9FAFB; font-weight: 700; color: var(--t3); }

/* ─── 역할별 네비 설명 ─── */
/* ★ 그룹 이름만으로는 "생산자" 와 "의뢰자" 가 안 갈린다. 한 줄 설명을 붙인다. */
.nav-desc { margin: -2px 18px 6px; font-size: 11px; color: var(--t5); line-height: 1.45; }

/* ─── 홈 3단계 설명 (비회원) ─── */

.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.how-s {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px 14px 44px; font-size: 13.5px; color: var(--t2); background: #FCFDFF;
}
.how-s b { color: var(--primary-deep); }
.how-s em { display: block; font-style: normal; margin-top: 5px; font-size: 12px; color: var(--t4); line-height: 1.55; }
.how-n {
  position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ─── 필터 칩 ─── */

.chips { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 14px; align-items: center; }
.chip {
  padding: 5px 11px; font-size: 12px; font-weight: 700; border-radius: 20px;
  border: 1px solid var(--line); background: var(--surface); color: var(--t3);
}
.chip.on { background: var(--primary-tint); border-color: #BFE0FB; color: var(--primary-deep); }

/* ─── 계정주 채널 (공개 디렉터리) ─── */

.cr-list { display: grid; gap: 12px; }
.cr { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: #FCFDFF; }
.cr-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cr-name { font-size: 15px; font-weight: 700; color: var(--t1); }
.cr-name:hover { color: var(--primary-deep); }
.cr-sum {
  display: flex; gap: 22px; flex-wrap: wrap; margin: 9px 0 0; padding: 9px 0 0;
  border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--t4);
}
.cr-sum b { color: var(--primary-deep); font-size: 14.5px; }
.cr-sum em { font-style: normal; color: var(--t5); font-size: 11.5px; }
.cr-chs { display: grid; gap: 8px; margin: 11px 0 0; }
.cr-ch {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 11px; background: var(--surface);
}
.cr-th { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--page); }
.cr-th.sm { width: 22px; height: 22px; vertical-align: middle; }
.cr-th.ph {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--t5); border: 1px solid var(--line);
}
.cr-ch-b { flex: 1 1 auto; min-width: 0; }
.cr-ch-n { display: block; font-size: 13.5px; font-weight: 700; color: var(--t2); }
.cr-ch-m { display: block; margin-top: 3px; font-size: 11.5px; color: var(--t5); }
.cr-ch-m em { font-style: normal; }
.cr-ch-f { flex: 0 0 auto; font-size: 12px; color: var(--t4); text-align: right; min-width: 74px; }
.cr-ch-f b { font-size: 14px; color: var(--t1); font-variant-numeric: tabular-nums; }
.cr-ch-f small { margin-left: 2px; }

/* ★ "못 읽는 값" 전용 표시. 숫자와 **다르게 보여야** 한다 —
   같은 서체로 0 을 쓰면 "팔로워 0명" 이라는 거짓말이 된다. */
.unk { color: var(--t5); font-size: 12px; font-weight: 400; }

td.acct { white-space: nowrap; }
td.acct img { margin-right: 5px; }

/* 공개 목록 토글 */
.sw { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); cursor: pointer; }
.sw input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }

/* ─── 홈 (리뷰노트형) ─── */

.card.hero { background: linear-gradient(180deg, #F7FBFF 0%, var(--surface) 100%); }
.card.hero h1 { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: var(--t1); letter-spacing: -0.4px; }
.hero-p { margin: 0; font-size: 14.5px; color: var(--t3); line-height: 1.65; }
.hero-p b { color: var(--primary-deep); }

/* 섹션 머리에 더보기 버튼이 붙는다 — `.card > h2` 는 이미 flex 다 */
.card > h2 > div .btn { font-weight: 700; }

/* ─── 의뢰 미션 카드 (썸네일 그리드) ─── */

.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mcard {
  display: block; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface); color: inherit;
}
.mcard:hover { text-decoration: none; border-color: #BFE0FB; box-shadow: 0 2px 10px rgba(42,125,212,.08); }
.mthumb {
  position: relative; aspect-ratio: 4 / 3; background: var(--primary-tint);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mthumb img { width: 100%; height: 100%; object-fit: cover; }
/* ★ 캠페인 이미지를 올리는 자리가 아직 없다. 빈 회색 상자를 두면 "못 불러왔다" 로 읽히므로
   유형을 적은 플레이스홀더를 그린다 — 없는 것이 아니라 아직 안 쓰는 것이다. */
.mph { font-size: 13px; font-weight: 700; color: var(--primary-deep); opacity: .75; letter-spacing: -0.2px; }
.mdday {
  position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 20px;
  background: rgba(18,18,18,.72); color: #fff; font-size: 11.5px; font-weight: 700;
}
.mpriv {
  position: absolute; right: 8px; top: 8px; padding: 3px 8px; border-radius: 20px;
  background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 700;
}
.mbody { padding: 11px 13px 13px; }
.mtitle {
  font-size: 14px; font-weight: 700; color: var(--t1); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 40px;
}
.mmeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; font-size: 12px; color: var(--t4); }
.mpay { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--t4); }
.mpay b { color: var(--primary-deep); font-size: 14px; }
.mpay em { font-style: normal; color: var(--t5); font-size: 11.5px; }

/* ─── 셀럽 카드 (썸네일 그리드) ─── */

.cgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ccard {
  display: block; text-align: center; padding: 16px 12px 14px; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.ccard:hover { text-decoration: none; border-color: #BFE0FB; box-shadow: 0 2px 10px rgba(42,125,212,.08); }
.cav {
  width: 62px; height: 62px; border-radius: 50%; object-fit: cover;
  background: var(--page); margin: 0 auto 10px; display: block;
}
.cav.ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--t5); border: 1px solid var(--line);
}
.cname {
  font-size: 13.5px; font-weight: 700; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmeta { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin: 7px 0 0; }
.cnum { margin: 8px 0 0; font-size: 12px; color: var(--t4); }
.cnum b { color: var(--t2); }

/* ─── 반응형 ─── */

@media (max-width: 860px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.c3 { grid-template-columns: 1fr; }
  .grid.c2 { grid-template-columns: 1fr; }
  .burger { display: inline-flex; }
  .side {
    position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%);
    transition: transform .18s ease; box-shadow: 0 0 24px rgba(0,0,0,.12);
  }
  .side.open { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.32); z-index: 39; }
  .page { padding: 16px; }
  .cal td { height: 72px; }
  .how-steps { grid-template-columns: 1fr; }
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card.hero h1 { font-size: 20px; }
  .cr-sum { gap: 14px; }
}

/* ── 노출 자리 (관리자) ──
   ★ "나가는 중 / 안 나감" 은 이 화면의 **결론**이다. 본문과 같은 색이면 표를 훑을 때
     지나친다 — 안 나가는 고정은 돈 받은 자리가 비어 있다는 뜻이라 눈에 띄어야 한다. */
.ok { color: var(--success); font-size: 12px; font-weight: 600; }

/* ★ `warn` 토스트가 없어서 경고가 일반 토스트로 나가고 있었다. 경고는 경고로 보여야 한다 —
   "고정했지만 지금은 나가지 않습니다" 가 성공 메시지처럼 보이면 안 된다. */
.toast.warn { background: var(--warn); }

/* ══════════════════════════════════════════════════════════
   계정 메뉴 · 화면 모드 (2026-09-01)

   ★ 이모지 금지 — 체크·화살표 전부 인라인 SVG 다.
   ★ 색은 기존 표준만 쓴다 (#4a9eff / #7ec3ff). 새 파란 hex 금지.
   ══════════════════════════════════════════════════════════ */

/* 상단바 사용자 버튼 — 전에는 클릭 안 되는 span 이었다 */
.topbar button.who {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 5px 8px; font-size: 12.5px; color: var(--t4); cursor: pointer;
  font-family: inherit;
}
.topbar button.who:hover { border-color: var(--line); background: var(--page); }
.topbar button.who .caret { display: inline-flex; opacity: .7; }
.topbar button.who[aria-expanded="true"] .caret { transform: rotate(180deg); }

.acct-menu {
  position: absolute; right: 18px; top: 52px; z-index: 30;
  width: 268px; max-width: calc(100vw - 36px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
  padding: 8px;
}
.acct-head { padding: 8px 10px 10px; font-size: 12.5px; color: var(--t3); word-break: break-all; }
.acct-sec { padding: 4px 10px; font-size: 11px; color: var(--t5); letter-spacing: .02em; }
.acct-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 10px; border: 0; background: none; border-radius: var(--radius-sm);
  text-align: left; cursor: pointer; font-family: inherit; color: var(--t2);
  text-decoration: none;
}
.acct-item:hover { background: var(--page); }
.acct-item b { font-size: 13px; font-weight: 600; }
.acct-item em { font-style: normal; font-size: 11.5px; color: var(--t5); margin-left: 2px; }
.acct-item .tick { margin-left: auto; display: inline-flex; color: var(--primary); }
.acct-item.on b { color: var(--primary-deep); }
.acct-item.danger b { color: var(--danger); }
.acct-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.acct-note { padding: 4px 10px 6px; font-size: 11px; color: var(--t5); line-height: 1.5; }
.acct-note a { color: var(--primary-deep); }

/* 사이드바 모드 줄 */
.mode-line {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin: 2px 0 10px; padding: 7px 10px;
  background: var(--primary-tint); border: 1px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
}
.mode-line:hover { border-color: var(--primary); }
.mode-line .k { font-size: 11px; color: var(--t4); }
.mode-line .v { font-size: 12.5px; font-weight: 600; color: var(--primary-deep); }
.mode-line .caret { margin-left: auto; display: inline-flex; color: var(--t4); }

/* 그룹 접기 —
   ★★ **접는 것이지 지우는 것이 아니다.** 제목은 남고 눌러서 편다
      (설계 §1.4.14 "역할로 메뉴를 숨기지 않는다 — 숨기면 그 역할을 시작하는 길이 사라진다"). */
.nav-group h3.foldable {
  display: flex; align-items: center; gap: 4px;
  cursor: pointer; user-select: none;
}
.nav-group h3.foldable:hover { color: var(--t2); }
.nav-group h3.foldable .caret { display: inline-flex; opacity: .55; transition: transform .12s; }
.nav-group.folded h3.foldable .caret { transform: rotate(-90deg); }
.nav-group.folded > .nav,
.nav-group.folded > .nav-desc { display: none; }