@charset "utf-8";
/* ============================================================
   메인 팝업 — 한국어 메인(/)·영어 페이지(/en). 마크업은 templates/_popups.php, 동작은 site.js 의 popups().
   색·치수 토큰은 client.css 의 것만 쓴다.

   상자 규격은 admin 팝업 관리의 편집 상자·미리보기와 같다(admin pages/home-admin.css 의 .home-popup-box).
     바깥 폭 = 팝업 너비(px, 테두리 포함) · 테두리 2px · 안쪽 여백 20px · 이미지 방식은 여백 없음
   한쪽을 바꾸면 다른 쪽도 고친다.
   ============================================================ */

/* 헤더 아래 왼쪽부터 나란히. 뒤를 막지 않는다 — 훑고 닫는 안내라 화면을 잠그지 않는다 */
.site-popups {
  position: fixed;
  top: calc(var(--util-h) + var(--header-h) + 24px);
  left: 50%;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  width: calc(var(--container) + var(--pad-x) * 2);
  max-width: 100%;
  max-height: calc(100vh - var(--util-h) - var(--header-h) - 48px);
  padding: 0 var(--pad-x);
  transform: translateX(-50%);
  pointer-events: none;
}

.site-popup {
  display: flex;
  flex-direction: column;
  width: var(--popup-width, 400px);
  max-width: 100%;
  max-height: inherit;
  overflow: hidden;
  background: var(--color-bg);
  border: 2px solid var(--color-brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  pointer-events: auto;
  animation: popup-in 0.4s var(--reveal-ease) backwards;
}
.site-popup[hidden] { display: none; }
/* 화면을 열면 아래에서 살짝 떠오르며 나타난다. 둘째 상자부터 조금씩 늦춘다 */
.site-popup:nth-child(2) { animation-delay: 80ms; }
.site-popup:nth-child(n + 3) { animation-delay: 160ms; }
@keyframes popup-in {
  from { opacity: 0; transform: translateY(16px); }
}

.site-popup__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  line-height: 1.6;
}
.site-popup--image .site-popup__body { padding: 0; }
.site-popup__body img { display: block; max-width: 100%; height: auto; }
.site-popup__body a { color: var(--color-brand); text-decoration: underline; }
.site-popup--image .site-popup__body a { text-decoration: none; }
.site-popup__body h3 { margin-bottom: 8px; font-size: var(--fs-h3); font-weight: 700; }
.site-popup__body p + p,
.site-popup__body ul,
.site-popup__body ol { margin-top: 8px; }
.site-popup__body ul { padding-left: 20px; list-style: disc; }
.site-popup__body ol { padding-left: 20px; list-style: decimal; }

.site-popup__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  padding: 8px 12px 8px 14px;
  background: var(--color-brand);
  color: var(--color-on-dark);
  font-size: var(--fs-xs);
}
.site-popup__today { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.site-popup__today input { width: 15px; height: 15px; accent-color: var(--color-accent); }
.site-popup__close {
  padding: 4px 8px;
  border: 1px solid var(--color-on-dark-line);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  color: var(--color-on-dark);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.site-popup__close:hover { border-color: var(--color-on-dark); background: var(--color-on-dark-line); }

/* 좁은 화면 — 한 번에 하나만, 화면 폭에 맞춰 보인다. 닫으면 다음 것이 나온다.
   높이가 다른 상자를 겹쳐 두면 뒤 상자의 아래 끝이 비쳐 보이므로 뒤의 것은 아예 숨긴다. */
@media (max-width: 767px) {
  .site-popups { top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 24px); }
  .site-popup { width: 100%; }
  .site-popup:not([hidden]) ~ .site-popup { display: none; }
}