/* ==========================================================================
   popup-layer — 메인 팝업 (기능정의서 A12)

   공지 한 줄이 팝업이다. 한 번에 세 장까지 나란히 뜬다.

   ⚠ 개발자가 소유한 파일이다 (src/public/app/css). 시안에 이 화면이 없어
     새로 만들었고, 앞단 토큰(tokens.css)을 그대로 쓴다 — 어드민 토큰이 아니다.
   ========================================================================== */

.popup-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: rgb(0 0 0 / 55%);
  overflow-y: auto;
}

/* 팝업이 떠 있는 동안 뒤가 같이 굴러다니면 어디를 보는지 알 수 없다 */
.has-popup { overflow: hidden; }

.popup-layer__stage {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: 1080px;
}

.popup-layer__list {
  display: flex;
  flex: 1 1 auto;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}

.popup-layer__item { flex: 1 1 0; min-width: 0; max-width: 340px; }

/* --- 카드 ------------------------------------------------------------------ */

.popup-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-bg);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.popup-card:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }

/* 포스터는 세로가 긴 인쇄물이다. 잘라내지 않고 비율을 지킨다 —
   행사 포스터는 아래쪽에 일정과 장소가 있어 잘리면 못 읽는다 */
.popup-card__img {
  display: block;
  width: 100%;
  height: auto;
}

.popup-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
}

.popup-card__title {
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.popup-card__text {
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.popup-card__more {
  margin-top: var(--sp-2);
  color: var(--c-blue-deep);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* --- 넘기기 ---------------------------------------------------------------- */

.popup-layer__nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  color: var(--c-text);
  cursor: pointer;
}
.popup-layer__nav:hover { background: var(--c-line-card); }
.popup-layer__nav:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }

.popup-layer__page {
  margin: 0;
  color: var(--c-bg);
  font-size: var(--fs-sm);
}

/* --- 아래 줄 --------------------------------------------------------------- */

/* 닫기와 "오늘 하루 보지 않기" 는 층 전체에 하나만 둔다 —
   카드마다 두면 세 장을 각각 닫아야 한다 */
.popup-layer__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-bg);
  border-radius: var(--radius-pill);
}

.popup-layer__check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  cursor: pointer;
}

/* --- 좁은 화면 -------------------------------------------------------------- */

/* 세 장을 가로로 늘어놓을 수 없다. 한 장씩 보여 주고 화살표로 넘긴다 */
@media (max-width: 767px) {
  .popup-layer__list { flex-direction: column; align-items: center; }
  .popup-layer__item { width: 100%; max-width: 320px; }
  .popup-layer__item:nth-child(n + 2) { display: none; }
}