/* ==========================================================================
   홈페이지 팝업  (2026-09-23 추가 · 같은 날 가운데 정렬 + 키비주얼 적용)
   · 마크업은 inc/popup_def.php · 동작은 assets/js/popup.js
   · 이 파일은 띄울 팝업이 있는 날에만 내려갑니다 (inc/header.php 조건부 로드)

   [자리]  화면 한가운데입니다(주관기관 요청). 처음에는 왼쪽 위 좌표에 띄우고
     큰 화면에서는 배경을 깔지 않았는데, 가운데에 두면 뒤쪽 글과 겹쳐 읽기가
     힘들어집니다. 그래서 배경을 함께 깔았습니다. 배경을 누르면 닫힙니다.

   [디자인]  색과 그림을 새로 만들지 않고 행사 키비주얼에서 그대로 가져왔습니다.
     하늘 #DEEFEB→#E4F0F6 · 언덕 wave.svg(#C3D391/#A5C456) · 꽃 flower-*.svg ·
     마스코트 코비 mascot.webp — 모두 이미 사이트가 쓰고 있는 자산입니다.
     팝업만 다른 세계처럼 보이지 않게 하려는 것입니다.
     ※ 그림을 올린 팝업에는 이 장식을 붙이지 않습니다(.pop__i--kv 가 아닙니다).
       올린 그림이 주인공인데 장식이 더해지면 둘이 서로 싸웁니다.
   ========================================================================== */

/* 화면 전체를 쓰는 가운데 정렬 상자. 팝업이 길면 이 안에서 스크롤되므로
   닫기 단추가 화면 밖으로 잘려 못 누르는 일이 없습니다. */
.pop{position:fixed;inset:0;z-index:380;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:24px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pop[hidden]{display:none}

.pop__dim{position:fixed;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background:rgba(20,38,44,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* ── 팝업 한 장 ───────────────────────────────────────────────────────── */
.pop__i{position:relative;z-index:1;flex:0 0 auto;
  width:var(--pw,400px);max-width:100%;
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(14,32,40,.3),0 3px 10px rgba(14,32,40,.14);
  animation:popIn .34s cubic-bezier(.2,.8,.25,1) both}
@keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

/* ── 하늘 띠 (그림 없는 팝업에만) ─────────────────────────────────────
   아래 가장자리를 언덕(wave.svg)으로 덮어 흰 본문으로 자연스럽게 넘어갑니다.
   preserveAspectRatio="none" 인 그림이라 가로로 늘려도 모양이 상하지 않습니다. */
.pop__sky{position:relative;height:122px;
  background:linear-gradient(180deg,#DEEFEB 0%,#E4F0F6 56%,#E9F4EF 100%)}
.pop__sky::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:40px;
  background:url("../img/kv/wave.svg") no-repeat center bottom;background-size:100% 100%}

/* 코비 — 언덕 위에 서서 천천히 흔들립니다 */
.pop__bee{position:absolute;right:18px;bottom:4px;width:84px;height:auto;z-index:1;
  filter:drop-shadow(0 6px 12px rgba(24,60,52,.2));
  animation:popBee 4.8s ease-in-out infinite}
@keyframes popBee{0%,100%{transform:translateY(0) rotate(-2.5deg)}
                  50%    {transform:translateY(-7px) rotate(2.5deg)}}

/* 꽃 — 포스터에서 쓰는 세 가지를 왼쪽에 흩뿌립니다 */
.pop__fl{position:absolute;background-repeat:no-repeat;background-position:center;
  background-size:contain;animation:popFl 6.4s ease-in-out infinite}
.pop__fl.f1{left:24px;top:24px;width:24px;height:24px;opacity:.95;
  background-image:url("../img/kv/flower-o.svg")}
.pop__fl.f2{left:64px;top:62px;width:17px;height:17px;opacity:.8;
  animation-delay:-2.1s;background-image:url("../img/kv/flower-p.svg")}
.pop__fl.f3{left:112px;top:22px;width:14px;height:14px;opacity:.7;
  animation-delay:-4.2s;background-image:url("../img/kv/flower-b.svg")}
@keyframes popFl{0%,100%{transform:translateY(0) rotate(0)}
                 50%    {transform:translateY(-6px) rotate(14deg)}}

/* ── 글 ───────────────────────────────────────────────────────────────
   제목을 색 띠 안이 아니라 흰 바탕에 둡니다. 하늘 띠가 이미 시선을 잡고
   있어서, 그 아래 또 색 띠를 두면 본문이 세 번째로 밀립니다. */
.pop__t{padding:20px 24px 0;color:#1F5D96;
  font-size:20.5px;font-weight:700;letter-spacing:-.035em;line-height:1.45;text-wrap:balance}
.pop__i--kv .pop__t{padding-top:14px}   /* 언덕과 제목 사이는 조금 좁게 */

.pop__b{display:block;color:var(--body,#4B5766)}
.pop__b img{width:100%;height:auto}
.pop__tx{padding:11px 24px 4px;font-size:16.5px;line-height:1.78;color:#4B5766}
/* 아래 4px 은 바로 뒤에 「자세히 보기」(.pop__go)가 올 것을 전제한 값입니다.
   연결 주소가 없는 팝업에는 그 줄이 없어 글이 단추에 붙습니다 — 그때는 직접 띄웁니다. */
.pop__tx:last-child{padding-bottom:24px}

.pop__go{display:block;padding:12px 24px 22px;font-size:15.5px;font-weight:600;
  color:#1F5D96;text-decoration:underline;text-underline-offset:3px}
a.pop__b:hover .pop__go{color:#143F66}
.pop__b img+.pop__go{padding-top:16px}

/* ── 아래 단추 줄 ─────────────────────────────────────────────────────
   주 이용자가 어르신입니다. 「☑ 오늘 하루 보지 않기 + ✕」 두 단계 대신
   누르면 그것으로 끝나는 큰 단추 둘로 두었습니다. 손가락 기준 최소 52px. */
.pop__f{display:flex;border-top:1px solid rgba(30,39,51,.1)}
.pop__f button{flex:1;min-height:54px;padding:15px 10px;font-size:15.5px;font-weight:600;
  letter-spacing:-.02em;transition:background .2s,color .2s}
.pop__day{color:#5A6673;background:#F3F7FA}
.pop__day:hover{background:#E4EDF4;color:#1E2733}
.pop__cls{flex:0 0 40%;color:#fff;background:#1F5D96}
.pop__cls:hover{background:#143F66}
.pop__f button:focus-visible{outline:3px solid #2E7DC4;outline-offset:-3px}

/* ── 좁은 화면 ────────────────────────────────────────────────────────
   자리는 큰 화면과 같습니다(가운데). 글씨와 장식만 한 단 줄입니다. */
@media (max-width:640px){
  .pop{padding:18px 16px;gap:14px}
  .pop__i{width:100%;max-width:400px}
  .pop__sky{height:104px}
  .pop__bee{width:72px}
  .pop__t{font-size:19px;padding-left:20px;padding-right:20px}
  .pop__tx{font-size:16px;padding-left:20px;padding-right:20px}
  .pop__go{padding-left:20px;padding-right:20px}
}

/* 아주 좁은 화면(갤럭시 폴드 등)에서는 단추가 두 줄이 되지 않게 글자만 줄입니다 */
@media (max-width:360px){
  .pop__f button{font-size:14.5px;padding:15px 6px}
  .pop__cls{flex:0 0 36%}
}

/* 동작 줄이기를 켠 분에게는 흔들림을 멈춥니다 (꽃·코비·등장 모두) */
@media (prefers-reduced-motion:reduce){
  .pop__i,.pop__bee,.pop__fl{animation:none}
}