/* 메인 팝업 (2026-10-22, 멀티 탭 2026-10-27)
   위치·폭은 관리자(팝업레이어관리) 첫 번째 팝업의 값이 --nw-left / --nw-top / --nw-width 로 들어온다.
   이 파일에는 생김새만 둔다. */

.popupTest {
  position: absolute;
  left: var(--nw-left, 3%);
  right: var(--nw-right, auto);
  top: var(--nw-top, 200px);
  width: var(--nw-width, 410px);
  max-width: calc(100vw - 20px);
  z-index: 9999990;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}

/* 내용 : 같은 칸에 겹쳐 두고 보이는 것만 바꾼다 → 탭이 바뀌어도 창 높이가 출렁이지 않는다 */
.popupTest .nwPanels {
  display: grid;
}

.popupTest .nwPanel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
  text-align: center;
  background-color: #fff;
}

.popupTest .nwPanel.active {
  visibility: visible;
  opacity: 1;
  transition: opacity .35s ease, visibility 0s;
}

/* 한 장짜리 팝업은 이미지 비율 그대로 둔다 */
.popupTest .nwPanel > a,
.popupTest .nwPanel img {
  display: block;
  width: 100%;
  height: auto;
}

/* 탭이 여러 개일 때 : 패널을 같은 칸에 겹쳐 두므로 칸 높이가 '가장 큰 이미지'에 맞춰진다.
   탭마다 이미지 비율이 다르면 짧은 쪽 아래가 흰 바탕으로 남는다.
   그래서 칸 비율을 못 박고 이미지가 그 칸을 채우게 한다(넘치는 부분은 잘린다).
   기본 2:3 — 팝업 이미지는 800×1200 으로 만든다. 다르게 하려면 관리자 내용에 style="--nw-ratio:3/4" 처럼 준다. */
.popupTest.is-multi .nwPanel {
  aspect-ratio: var(--nw-ratio, 2 / 3);
  overflow: hidden;
}
.popupTest.is-multi .nwPanel > p,
.popupTest.is-multi .nwPanel > a,
.popupTest.is-multi .nwPanel > p > a {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}
.popupTest.is-multi .nwPanel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 탭 : 3개면 한 줄, 그 이상이면 3개씩 줄바꿈 */
.popupTest .nwTabs {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #e5e5e5;
  background: #fff;
}

.popupTest .nwTab {
  flex: 1 1 33.333%;
  min-width: 0;
  min-height: 48px;
  padding: 8px 6px;
  border: 0;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
  color: #888;
  font-size: 14px;
  line-height: 1.35;
  word-break: keep-all;
  cursor: pointer;
  position: relative;
}

.popupTest .nwTab:nth-child(3n),
.popupTest .nwTab:last-child {
  border-right: 0;
}

.popupTest .nwTab:hover {
  color: #333;
}

.popupTest .nwTab.active {
  color: #111;
  font-weight: 700;
}

.popupTest .nwTab.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #111;
  pointer-events: none;
}

.popupTest .nwTab:focus-visible {
  outline: 2px solid #f47b20;
  outline-offset: -4px;
}

/* 아래 띠 : 왼쪽 "오늘 그만 보기", 오른쪽 "닫기" */
.popupTest .divPopupFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1a1a1a;
}

.popupTest .divPopupFooter button {
  cursor: pointer;
  border: 0;
  background: none;
  color: #fff;
  height: 42px;
  padding: 0 16px;
  font-size: 14px;
}

.popupTest .divPopupFooter .nwHide {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.popupTest .divPopupFooter .nwHide::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: #fff;
}

.popupTest .divPopupFooter .nwHide:hover::before {
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px #f47b20;
}

.popupTest .divPopupFooter button:hover {
  color: #ddd;
}

/* 접속기기 : 관리자에서 'PC' 또는 '모바일'만 고른 팝업 (탭과 내용 함께) */
@media (max-width: 640px) {
  #mainPopups [data-device="pc"] { display: none !important; }
}
@media (min-width: 641px) {
  #mainPopups [data-device="mobile"] { display: none !important; }
}

/* Tablet */
@media (max-width: 1024px) {
  .popupTest .nwTab { font-size: 13px; }
  .popupTest .divPopupFooter button { font-size: 13px; }
}

/* Mobile : 관리자 위치값 대신 화면 정가운데 위쪽에 맞춘다 */
@media (max-width: 640px) {
  .popupTest {
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50px;
    width: calc(100% - 40px);
    max-width: 350px;
  }
  .popupTest .nwTab { min-height: 44px; padding: 6px 4px; font-size: 12px; }
  .popupTest .divPopupFooter button { height: 40px; padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .popupTest .nwPanel,
  .popupTest .nwPanel.active { transition: none; }
}