.mwpop-back {
  position: fixed; inset: 0; z-index: 12000;
  display: none; align-items: center; justify-content: center;
  padding: 16px;

  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.55);
  overscroll-behavior: contain;
}
.mwpop-back.active { display: flex; }

.mwpop {
  background: var(--mw-surface);
  color: var(--mw-ink);
  border: 1px solid var(--mw-line);
  border-radius: 16px;
  box-shadow: var(--mw-shadow-lift);

  width: min(420px, 100%);


  max-height: min(88dvh, 780px);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: mwpop-in var(--mw-dur, .18s) var(--mw-ease, ease-out);
}
@keyframes mwpop-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mwpop { animation: none; } }

.mwpop-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--mw-line);
}
.mwpop-title {
  flex: 1 1 auto; min-width: 0;
  margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45;
  color: var(--mw-accent-ink);
  overflow-wrap: anywhere;
}
.mwpop-x {
  flex: none; width: 30px; height: 30px; margin: -4px -4px 0 0;
  border: none; border-radius: 8px; background: transparent;
  color: var(--mw-muted); font-size: 19px; line-height: 1; cursor: pointer;
}
.mwpop-x:hover { background: var(--mw-surface-sunken); color: var(--mw-ink); }
.mwpop-x:focus-visible { outline: 2px solid var(--mw-accent); outline-offset: 1px; }

.mwpop-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mwpop-img {
  display: block; width: 100%; height: auto;
  background: var(--mw-surface-sunken);
}
.mwpop-body {
  margin: 0; padding: 14px 16px;
  font-size: 14px; line-height: 1.65; color: var(--mw-ink-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mwpop-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--mw-line);
  background: var(--mw-surface-sunken);
}
.mwpop-today {
  display: flex; align-items: center; gap: 7px;
  margin-right: auto;
  font-size: 13px; color: var(--mw-muted); cursor: pointer; user-select: none;
}
.mwpop-today input { width: 17px; height: 17px; flex: none; margin: 0; accent-color: var(--mw-check, var(--mw-accent)); }
.mwpop-btn {
  flex: none; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--mw-line-strong);
  background: var(--mw-surface); color: var(--mw-ink);
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.mwpop-btn:hover { background: var(--mw-surface-sunken); }
.mwpop-btn.primary { background: var(--mw-accent); border-color: var(--mw-accent); color: #fff; }
.mwpop-btn.primary:hover { filter: brightness(1.06); }
.mwpop-btn:focus-visible { outline: 2px solid var(--mw-accent); outline-offset: 2px; }


.mwpop-count { flex: none; font-size: 12px; color: var(--mw-muted); font-variant-numeric: tabular-nums; }



@media (max-width: 400px) {
  .mwpop-back { padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .mwpop-head { padding: 14px 13px 9px; }
  .mwpop-body { padding: 12px 13px; }
  .mwpop-foot { padding: 11px 13px; }
  .mwpop-today { width: 100%; margin: 0 0 2px; }
  .mwpop-btn { flex: 1 1 0; text-align: center; }
}



@media (max-width: 640px) {
  .mwpop-title { font-size: 15.5px; }
}