/* 알림 팝업(광고·공지) — 작업자·관리자·센터가 같은 모양으로 쓴다.
   슈퍼관리자가 만들어 둔 것을 화면에 들어올 때 한 번 띄운다.

   화면 크기를 가리지 않는다 — 작업자는 손에 든 전화로, 관리자는 책상 화면으로 본다.
   그래서 폭은 min(), 그림은 비율 유지, 넘치는 본문은 창 안에서만 구른다. */

.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%);
  /* 세로도 마찬가지 — 화면보다 길어지면 창이 자라는 대신 안쪽이 구른다.
     dvh 를 쓰는 까닭은 전화 브라우저의 주소줄이 접혔다 펴질 때 vh 가 튀기 때문이다. */
  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; }

/* 아직 볼 것이 더 남았을 때 — "3 중 1" */
.mwpop-count { flex: none; font-size: 12px; color: var(--mw-muted); font-variant-numeric: tabular-nums; }

/* 아주 좁은 화면(320px 언저리)에서는 아래 줄이 두 줄로 접히는데, 그때 「오늘 하루 보지 않기」가
   단추와 붙어 눌리기 쉬우므로 한 줄을 통째로 차지하게 한다. */
@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; }
}

/* iOS 는 16px 미만 입력칸을 누르면 화면을 확대하고 되돌리지 않는다 — 체크상자는 해당 없지만,
   이 파일을 싣는 화면들이 모두 같은 규칙을 쓰므로 결을 맞춰 둔다. */
@media (max-width: 640px) {
  .mwpop-title { font-size: 15.5px; }
}