/* 운영자 페이지 — 앱과 같은 색 (apps/mobile/src/theme/tokens.ts) */
:root {
  --canvas: #fafaf8;
  --surface: #ffffff;
  --soft: #f2f2ef;
  --line: #e8e8e4;
  --ink: #1e1f22;
  --ink-soft: #686b72;
  --rose: #c8466a;
  --rose-deep: #aa3c5a;
  --rose-soft: #faedf0;
  --danger: #b42318;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--canvas); color: var(--ink); }
body { font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 14px; margin: 16px 0 6px; color: var(--ink-soft); font-weight: 600; }
main { max-width: 1120px; margin: 0 auto; padding: 20px 16px 60px; }

.top { display: flex; gap: 12px; align-items: center; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--surface); border-bottom: 1px solid var(--line); }
.who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; font-size: 13px; }

/* 탭: 폰에서도 엄지로 누르기 쉽게 위쪽에 고정 */
.tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; padding: 6px 8px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { flex: 1; min-height: 44px; justify-content: center; background: transparent; color: var(--ink-soft); border-color: transparent; }
.tabs button:hover { background: var(--soft); }
.tabs button.active { background: var(--rose-soft); color: var(--rose-deep); border-color: var(--rose-soft); }
.grow { flex: 1; }
.row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.row.wrap { flex-wrap: wrap; margin-top: 16px; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.narrow { max-width: 420px; margin: 40px auto; }

label { display: block; margin: 8px 0; }
input:not([type]), input[type="text"], input[type="email"], input[type="password"], textarea {
  display: block; width: 100%; margin-top: 4px; padding: 9px 11px; font: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
}
input:focus-visible, textarea:focus-visible, button:focus-visible, .button:focus-within { outline: 2px solid var(--rose); outline-offset: 2px; }

button, .button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 9px 16px; font: inherit; font-weight: 600;
  border-radius: 999px; border: 1px solid var(--rose); background: var(--rose); color: #fff; cursor: pointer;
}
button:hover, .button:hover { background: var(--rose-deep); }
button.ghost, .button.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
button.ghost:hover, .button.ghost:hover { background: var(--soft); }
button.danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.button.disabled { opacity: 0.5; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { min-height: 36px; padding: 6px 14px; background: var(--surface); color: var(--ink); border-color: var(--line); font-weight: 500; }
.chip.active { background: var(--rose-soft); color: var(--rose-deep); border-color: var(--rose); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.card-item { cursor: pointer; padding: 10px; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: block; font-weight: 400; }
.card-item:hover { background: var(--soft); }
.card-item img, .card-item .empty { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: var(--soft); display: block; }
.card-item .empty { display: grid; place-items: center; color: var(--ink-soft); }
.card-item p { margin: 8px 0 0; }

.badge { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--soft); color: var(--ink-soft); }
.badge.published { background: var(--rose-soft); color: var(--rose-deep); }
.badge.retired { background: #eee; color: #888; }

.editor { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .editor { grid-template-columns: 1fr; } }
.stage { position: relative; display: inline-block; max-width: 100%; border-radius: 12px; overflow: hidden; background: var(--soft); touch-action: none; }
.stage img { display: block; max-width: 100%; max-height: 70vh; user-select: none; -webkit-user-drag: none; }
.stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.box .body { fill-opacity: 0.16; stroke-width: 3; stroke-dasharray: 8 5; cursor: grab; }
.box.person .body { fill: var(--rose); stroke: var(--rose); }
.box.caption .body { fill: #2f6fdb; stroke: #2f6fdb; }
.box .handle { fill: #fff; stroke: var(--ink); stroke-width: 2; cursor: nwse-resize; }
.box .label { font: 600 16px sans-serif; fill: var(--ink); pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; margin: 6px 12px 6px 0; }
input[type="color"] { width: 40px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
input.num { width: 64px; padding: 6px 8px; font: inherit; border: 1px solid var(--line); border-radius: 8px; }
.row.tight { margin-top: 4px; }

.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.checks label { margin: 0; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; }
.checks input { margin: 0; accent-color: var(--rose); }

.preview { max-width: 360px; width: 100%; border-radius: 12px; background: var(--soft); }
.message { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); margin: 0; padding: 0; }
.message:not(:empty) { padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 999px; }
.message.error:not(:empty) { background: var(--danger); }

/* 스티커·기본 틀 */
.small-cards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.checker { display: grid; place-items: center; aspect-ratio: 1; max-width: 420px; width: 100%; border-radius: 12px; overflow: hidden;
  background: repeating-conic-gradient(#ececea 0% 25%, #fafaf8 0% 50%) 50% / 24px 24px; }
.checker img { width: 100%; height: 100%; object-fit: contain; }
.card-item .checker { max-width: none; }
.list { display: flex; flex-direction: column; gap: 8px; }
.list-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font-weight: 400; }
.list-item.done { color: var(--ink-soft); }
/* 비용 탭 (ops.js) */
.notice { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--soft); }
.notice.ok { background: #eef6ee; color: #25602d; }
.notice.warn { background: #fff4e0; color: #8a5300; }
.notice.danger { background: #fdecea; color: var(--danger); font-weight: 600; }
.meter-wrap { margin-bottom: 14px; }
.meter { height: 12px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--ink-soft); border-radius: 999px; }
.meter span.high { background: #d98a00; }
.meter span.over { background: var(--danger); }
.tabs button.alert { position: relative; }
input[type="datetime-local"] { padding: 8px 10px; font: inherit; border: 1px solid var(--line); border-radius: 10px; }
/* 2단계 인증 (mfa.js) */
.qr { display: block; width: 200px; height: 200px; margin: 8px 0; background: #fff; border-radius: 12px; padding: 8px; }
.secret { word-break: break-all; font-size: 13px; }
.tabs button.alert::after { content: ''; position: absolute; top: 8px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.list-item:hover { background: var(--soft); }
.list-item .grow { min-width: 0; }
.list-item small { display: block; color: var(--ink-soft); }
ul.plain { margin: 0; padding-left: 18px; }

/* 품질 검사 */
.quality:not(:empty) { margin: 10px 0; padding: 10px 14px; border-radius: 12px; background: var(--soft); }
.quality ul { margin: 6px 0 0; padding-left: 18px; }
.quality.pass { background: #ecf7ef; }
.quality.warn { background: #fff6e0; }
.quality.fail { background: #fdecea; color: var(--danger); }
.badge.pass { background: #ecf7ef; color: #1f7a3d; }
.badge.warn { background: #fff6e0; color: #8a5a00; }
.badge.fail { background: #fdecea; color: var(--danger); }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* 폰 */
@media (max-width: 600px) {
  main { padding: 12px 12px 80px; }
  h1 { font-size: 19px; }
  .card { padding: 14px; border-radius: 14px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .small-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row.wrap > .button { width: 100%; justify-content: center; }
  .actions button, .actions .button { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .stage img { max-height: none; }
  input:not([type]), input[type="text"], input[type="email"], input[type="password"], textarea { font-size: 16px; } /* iOS 확대 방지 */
  .message { left: 12px; right: 12px; transform: none; bottom: max(16px, env(safe-area-inset-bottom)); text-align: center; }
  .message:not(:empty) { border-radius: 14px; }
}
.card-item .checker img { background: transparent; border-radius: 0; aspect-ratio: auto; }

/* 가져오기: 그림 위에 지울 자리 칠하기 */
.paint { position: relative; width: 100%; max-width: 512px; aspect-ratio: 1; margin: 8px 0; border-radius: 12px; overflow: hidden; background: var(--soft); touch-action: none; }
.paint img, .paint canvas, .paint svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.paint img { object-fit: contain; user-select: none; -webkit-user-drag: none; }
.paint canvas { opacity: 0.55; cursor: crosshair; touch-action: none; }
.paint svg { pointer-events: none; }
.person-box { fill: var(--rose); fill-opacity: 0.15; stroke: var(--rose); stroke-width: 3; stroke-dasharray: 8 5; }