/* ============================================================
   ENDOLPHIN — 팝업 공지 모양 (notice-popup.css) · 2026-10-18
   코랄핑크 · 아이보리 (ENDOLPHIN WORLD 톤). 예전 notice-modal.css 와 이름이 겹치지 않게 np- 로 씁니다.
   ============================================================ */
.np{
  --np-coral:#ff7a6b; --np-coral-2:#ff9d8a; --np-coral-ink:#d9503f;
  --np-ivory:#fffaf1; --np-ivory-2:#fff3e3; --np-line:#f6dccf;
  --np-ink:#4a3631; --np-ink-2:#7a645c; --np-ink-3:#b39c92;
  position:fixed; inset:0; z-index:9100;   /* 앱 설치 안내 칸(pwa.css 9000)보다 위 · 스케줄러 그림 크게 보기(9999)보다 아래 */
  display:flex; align-items:center; justify-content:center; padding:22px;
  font-family:'Pretendard','Malgun Gothic',sans-serif; }
html[data-theme="dark"] .np{
  --np-ivory:#2b2222; --np-ivory-2:#352a29; --np-line:#4a3a37;
  --np-ink:#f6e9e2; --np-ink-2:#d6c3ba; --np-ink-3:#a8948b; --np-coral-ink:#ff9d8a; }

.np-dim{ position:absolute; inset:0; background:rgba(58,36,32,.46);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; transition:opacity .22s; }
.np.on .np-dim{ opacity:1; }

.np-card{ position:relative; width:min(420px,100%); max-height:calc(100vh - 44px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--np-ivory); border:1.5px solid var(--np-line); border-radius:26px;
  box-shadow:0 26px 64px rgba(170,80,60,.26);
  opacity:0; transform:translateY(16px) scale(.96);
  transition:opacity .24s, transform .24s cubic-bezier(.16,1,.3,1); }
.np.on .np-card{ opacity:1; transform:none; }
html[data-theme="dark"] .np-card{ box-shadow:0 26px 64px rgba(0,0,0,.6); }

.np-top{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px 0 20px; }
.np-tag{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  background:var(--np-ivory-2); color:var(--np-coral-ink); font-size:12px; font-weight:800; }
.np-x{ width:34px; height:34px; border:none; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--np-ink-3); font-size:20px; line-height:1; }
.np-x:hover, .np-x:focus-visible{ background:var(--np-ivory-2); color:var(--np-ink); outline:none; }

.np-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 22px 4px; }
.np-img{ display:block; width:100%; max-height:42vh; object-fit:contain; border-radius:16px;
  background:var(--np-ivory-2); margin-bottom:14px; }
.np-t{ font-family:'Jua',sans-serif; font-weight:400; font-size:21px; line-height:1.35;
  letter-spacing:-.3px; color:var(--np-ink); word-break:keep-all; }
.np-b{ margin-top:10px; font-size:14.5px; line-height:1.75; white-space:pre-wrap;
  word-break:break-word; color:var(--np-ink-2); }
.np-when{ margin-top:12px; font-size:12px; font-weight:700; color:var(--np-ink-3); }
.np-link{ display:block; margin-top:16px; padding:13px 16px; border-radius:999px;
  text-align:center; text-decoration:none; font-size:14.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--np-coral),var(--np-coral-2));
  box-shadow:0 9px 22px rgba(255,122,107,.32); transition:transform .16s; }
.np-link:hover{ transform:translateY(-1px); }
.np-link:focus-visible{ outline:3px solid var(--np-coral-ink); outline-offset:2px; }

.np-pager{ display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 0 2px; }
.np-dots{ display:flex; gap:6px; }
.np-dot{ width:7px; height:7px; border-radius:50%; background:var(--np-line); }
.np-dot.on{ width:18px; border-radius:999px; background:var(--np-coral); }
.np-nav{ border:none; background:transparent; cursor:pointer; padding:6px 8px; border-radius:10px;
  font-family:inherit; font-size:13px; font-weight:800; color:var(--np-ink-2); }
.np-nav:hover, .np-nav:focus-visible{ background:var(--np-ivory-2); color:var(--np-ink); outline:none; }
.np-nav[disabled]{ opacity:.35; cursor:default; }

.np-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; padding:12px 16px 14px 20px; border-top:1px solid var(--np-line); }
.np-today{ border:none; background:transparent; cursor:pointer; padding:6px 4px;
  font-family:inherit; font-size:13px; font-weight:700; color:var(--np-ink-3); }
.np-today:hover, .np-today:focus-visible{ color:var(--np-ink); text-decoration:underline; outline:none; }
.np-close{ border:none; cursor:pointer; padding:10px 22px; border-radius:999px;
  font-family:inherit; font-size:14px; font-weight:800; color:var(--np-coral-ink);
  background:var(--np-ivory-2); }
.np-close:hover, .np-close:focus-visible{ background:var(--np-line); outline:none; }

@media (max-width:480px){
  .np{ padding:0; align-items:flex-end; }
  .np-card{ width:100%; max-height:88vh; border-radius:26px 26px 0 0; border-bottom:none; }
  .np-body{ padding:10px 18px 4px; }
  .np-img{ max-height:30vh; }            /* 폰에선 그림을 줄여 링크 버튼까지 한 화면에 */
  .np-foot{ padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)); }
}
@media (prefers-reduced-motion:reduce){
  .np-card, .np-dim, .np-link{ transition:none; }
}