/* 문제: 공지 팝업 틀이 없음 /
 * 이유: 사령관 — 시안 테두리를 공지 팝업에도 만들어 둘 것 /
 * 수정: 창살·아자 팝업 + 두루마리 제목. 오색띠 제거. 자동광고 기동 아님 */
.wbpc-notice-popup-backdrop,
.wbpc-promo-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(40, 24, 12, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wbpc-notice-popup,
.wbpc-promo-popup {
  position: relative;
  max-width: 440px;
  width: 100%;
  overflow: hidden;
  background-color: #f6eedc;
  background-image: url("/images/ornament/dcc-han-paper.svg");
  background-size: 240px 240px;
  border: 16px solid transparent;
  border-image: url("/images/ornament/dcc-notice-popup.svg") 32 / 16px / 0 stretch;
  border-radius: 0;
  box-shadow: 0 22px 60px rgba(61, 36, 20, 0.28);
  font: 15px/1.6 "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  color: #3d2414;
}
.wbpc-notice-popup .np-hero,
.wbpc-promo-popup .pp-hero {
  padding: 22px 22px 10px;
  text-align: center;
  background: transparent;
}
.wbpc-notice-popup .np-title,
.wbpc-promo-popup .pp-hero h2 {
  margin: 8px auto 6px;
  max-width: 92%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("/images/ornament/dcc-notice-scroll.svg") center / 100% 100% no-repeat;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #3d2414;
  font-weight: 800;
}
.wbpc-notice-popup .np-copy,
.wbpc-promo-popup .pp-copy,
.wbpc-promo-popup .pp-hero p {
  margin: 0 22px 12px;
  text-align: center;
  color: #5c4a38;
  font-size: 14px;
}
.wbpc-notice-popup .np-body,
.wbpc-promo-popup .pp-body {
  padding: 8px 22px 20px;
}
.wbpc-notice-popup .np-actions,
.wbpc-promo-popup .pp-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wbpc-notice-popup .np-actions a,
.wbpc-notice-popup .np-actions button,
.wbpc-promo-popup .pp-actions a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  min-width: 120px;
  border: 8px solid transparent;
  border-image: url("/images/ornament/dcc-btn-banner.svg") 6 16 / 8px / 0 stretch;
  border-radius: 0;
  background: #fff6e4;
  color: #3d2414;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.wbpc-notice-popup .np-foot,
.wbpc-promo-popup .pp-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}
.wbpc-notice-popup .np-foot button,
.wbpc-promo-popup .pp-foot button {
  background: none;
  border: 0;
  color: #8a7a66;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 2px;
  font-family: inherit;
}
.wbpc-notice-popup .np-note,
.wbpc-promo-popup .pp-note {
  margin-top: 10px;
  text-align: center;
  color: #8a7a66;
  font-size: 12px;
}

/* 문제: 공지 팝업이 웹 모달 사각 /
 * 이유: 사령관 — 족자 형식 · 펼쳐지는 것도 좋다 /
 * 수정: 세로 족자 · 위에서 아래로 펼침. 사진·버튼·대화3칸에는 안 씀 */
.wbpc-notice-jokja {
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  font: 15px/1.6 "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  color: #3d2414;
}
.jk-cord {
  width: 3px;
  height: 26px;
  background: #3d2414;
  border-radius: 2px;
}
.jk-knot {
  width: 22px;
  height: 10px;
  margin-bottom: 2px;
  background: #c9a227;
  border-radius: 1px;
}
.jk-roller {
  width: 100%;
  height: 28px;
  background: url("/images/ornament/dcc-jokja-roller.svg") center / 100% 100% no-repeat;
  flex-shrink: 0;
  z-index: 2;
}
.jk-sheet {
  width: calc(100% - 18px);
  box-sizing: border-box;
  overflow: hidden;
  max-height: 0;
  opacity: 0.35;
  transform-origin: top center;
  background-color: #f6eedc;
  background-image: url("/images/ornament/dcc-han-paper.svg");
  background-size: 240px 240px;
  border-left: 12px solid #7a1f1a;
  border-right: 12px solid #7a1f1a;
  box-shadow: inset 0 0 0 1px #c9a227;
  padding: 0 16px;
}
.wbpc-notice-jokja.is-open .jk-sheet {
  max-height: 480px;
  opacity: 1;
  padding: 16px 16px 12px;
  transition: max-height 0.85s ease-out, opacity 0.45s ease-out, padding 0.85s ease-out;
}
.jk-tassel {
  width: 10px;
  height: 28px;
  margin-top: 2px;
  background: #c9a227;
  border-radius: 0 0 6px 6px;
}
.wbpc-notice-jokja .np-title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.08em;
  font-weight: 800;
}
.wbpc-notice-jokja .np-copy {
  margin: 0 0 14px;
  text-align: center;
  color: #5c4a38;
  font-size: 14px;
}
.wbpc-notice-jokja .np-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.wbpc-notice-jokja .np-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 120px;
  padding: 0 12px;
  border: 8px solid transparent;
  border-image: url("/images/ornament/dcc-btn-banner.svg") 6 16 / 8px / 0 stretch;
  background: #fff6e4;
  color: #3d2414;
  font-weight: 700;
  text-decoration: none;
}
.wbpc-notice-jokja .np-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.wbpc-notice-jokja .np-foot button {
  background: none;
  border: 0;
  color: #8a7a66;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.wbpc-notice-jokja .np-note {
  margin: 8px 0 0;
  text-align: center;
  color: #8a7a66;
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .wbpc-notice-jokja .jk-sheet,
  .wbpc-notice-jokja.is-open .jk-sheet {
    transition: none;
    max-height: 480px;
    opacity: 1;
    padding: 16px 16px 12px;
  }
}
/* 문제: 두꺼운 9-slice 틀이 핸드폰·태블릿에서 화면을 잡아먹음 /
 * 이유: 사령관 — 틀 오색띠 제거 · 기기 자동크기 /
 * 수정: 1024 이하 금줄 1px · 팝업이 화면 안에 맞게 */
@media (max-width: 1024px) {
  .wbpc-notice-popup-backdrop,
  .wbpc-promo-popup-backdrop {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    align-items: stretch;
  }
  .wbpc-notice-popup,
  .wbpc-promo-popup {
    border: 1px solid #c9a227;
    border-image: none;
    max-width: none;
    max-height: calc(var(--app-h, 100dvh) - 16px);
    width: 100%;
    overflow: auto;
  }
  .wbpc-notice-popup .np-actions a,
  .wbpc-notice-popup .np-actions button,
  .wbpc-promo-popup .pp-actions a,
  .wbpc-notice-jokja .np-actions a {
    border: 1px solid #c9a227;
    border-image: none;
  }
  .wbpc-notice-jokja {
    width: min(100%, calc(100vw - 16px));
    max-height: calc(var(--app-h, 100dvh) - 16px);
  }
}