/* 팝업 알림 — 세 가지 모양 (2026-10-12).
   홈페이지와 학습 화면이 서로 다른 css 를 쓰므로 여기서는 **스스로 서는 값**만 쓴다
   (다른 파일의 변수에 기대지 않는다). 글자꼴은 두 쪽 모두 Pretendard 다. */

.pop { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.pop * { box-sizing: border-box; }
.pop .pop-dim {
  position: absolute; inset: 0; background: rgba(15, 23, 42, .45);
  pointer-events: auto; animation: pop-fade .18s ease-out;
}
.pop .pop-card {
  position: absolute; pointer-events: auto; background: #fff; color: #0f172a;
  border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px 22px 16px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
  animation: pop-rise .2s ease-out;
}
.pop .pop-x {
  position: absolute; top: 8px; right: 10px; width: 32px; height: 32px;
  border: 0; background: transparent; color: #64748b; font-size: 22px; line-height: 1;
  border-radius: 8px; cursor: pointer;
}
.pop .pop-x:hover { background: #f1f5f9; color: #0f172a; }
.pop .pop-x:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.pop .pop-title { margin: 0 28px 10px 0; font-size: 19px; font-weight: 700; line-height: 1.35; }
.pop .pop-body { margin: 0; color: #334155; font-size: 15px; line-height: 1.65; }
.pop .pop-body p { margin: 0 0 8px; }
.pop .pop-body p:last-child { margin-bottom: 0; }
.pop .pop-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid #f1f5f9;
}
.pop .pop-go {
  display: inline-block; padding: 9px 16px; border-radius: 10px;
  background: #1d4ed8; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px;
}
.pop .pop-go:hover { background: #1e40af; }
.pop .pop-today {
  display: inline-flex; align-items: center; gap: 6px;
  color: #64748b; font-size: 13px; cursor: pointer; margin-left: auto;
}
.pop .pop-today input { margin: 0; }

/* ① 가운데 알림창 — 가장 눈에 띈다. 꼭 봐야 하는 것에만 쓴다. */
.pop-center .pop-card {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
}

/* ② 아래 띠 — 화면을 가리지 않는다. 늘 띄워 두어도 괜찮다. */
.pop-bar .pop-card {
  left: 0; right: 0; bottom: 0; width: 100%;
  border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
  padding: 14px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  animation: pop-up .2s ease-out;
}
.pop-bar .pop-title { margin: 0; font-size: 16px; }
/* 띠는 **띠답게 얇아야** 한다. 긴 글을 적어도 두 줄까지만 보인다 —
   휴대전화에서 재어 보니 그러지 않으면 화면의 3분의 1을 먹었다(2026-10-12).
   긴 글은 「가운데 알림창」으로 띄우는 것이 맞다. 관리자 화면에도 그렇게 적어 두었다. */
.pop-bar .pop-body {
  font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.pop-bar .pop-body p { margin: 0; }
.pop-bar .pop-foot { margin: 0; padding: 0; border: 0; margin-left: auto; }
.pop-bar .pop-x { position: static; order: 9; }

/* ③ 오른쪽 아래 쪽지 — 조용히 알린다. 모바일에서는 아래 띠처럼 넓게 선다. */
.pop-corner .pop-card {
  right: 20px; bottom: 20px; width: min(340px, calc(100vw - 32px));
  padding: 18px 18px 12px; animation: pop-up .2s ease-out;
}
.pop-corner .pop-title { font-size: 16px; }
.pop-corner .pop-body { font-size: 14px; }

@keyframes pop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-rise { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes pop-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 640px) {
  .pop-corner .pop-card { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .pop-bar .pop-card { padding: 12px 16px; gap: 10px; }
  /* 단추와 「오늘 하루 보지 않기」는 한 줄을 나눠 쓴다 — width:100% 를 주면 각각 한 줄을
     차지해 띠가 두 배로 두꺼워진다 */
  .pop-bar .pop-foot { margin-left: 0; }
  .pop-bar .pop-today { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pop .pop-card, .pop .pop-dim { animation: none; }
}

/* 관리자 화면의 팝업 칸 — site.css 에 없는 꼴만 여기서 보탠다.
   .form label 이 grid 라서 체크상자가 글자 위로 올라간다. 그것만 가로로 돌려 둔다. */
.form fieldset.plain { border: 0; padding: 0; margin: 0; }
.form fieldset.plain legend { padding: 0; font-weight: 600; font-size: 15px; }
.form label.inline-check { display: flex; align-items: center; gap: 8px; }
.form label.inline-check input { width: auto; }

/* 관리자 화면의 디자인 고르기 — 세 가지를 작게 그려 놓고 고른다 */
.pop-pick { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 2px; }
.pop-pick label { cursor: pointer; }
.pop-pick input { position: absolute; opacity: 0; pointer-events: none; }
/* .pp 와 .pp-sketch 는 span 이다 — 블록으로 돌려놓지 않으면 width·height 가 먹지 않고
   안쪽의 절대 위치 조각이 엉뚱한 자리로 달아난다 (2026-10-12에 화면에서 봤다). */
.pop-pick .pp {
  display: block; width: 150px; border: 2px solid #e2e8f0; border-radius: 12px;
  padding: 8px; background: #fff;
}
.pop-pick input:checked + .pp { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29, 78, 216, .12); }
.pop-pick input:focus-visible + .pp { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.pop-pick .pp-sketch {
  display: block; position: relative; height: 84px; border-radius: 8px;
  background: #f1f5f9; overflow: hidden;
}
.pop-pick .pp-sketch i { position: absolute; display: block; background: #cbd5e1; border-radius: 2px; }
.pop-pick .pp-sketch .box { background: #fff; border: 1px solid #94a3b8; border-radius: 4px; }
.pop-pick .pp-name { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #0f172a; }
.pop-pick .pp-when { display: block; font-size: 12px; color: #64748b; line-height: 1.4; }