/* 첫 화면 팝업 — 관리자 [팝업 관리] 에서 올린 안내창.
   틀만 여기서 잡고, 안쪽 글꼴 · 색은 담당자가 편집기에서 정한 대로 둔다.

   자리는 absolute 다. '위로부터 50px' 이 화면이 아니라 문서 맨 위에서 잰 값이고,
   내려 읽는 사람을 따라다니지 않는 쪽이 오래 쓰는 사이트의 버릇이다. */
.hp-pop{
  position:absolute;z-index:120;
  background:#fff;border:1px solid #e3e6ea;border-radius:2px;
  box-shadow:0 18px 50px rgba(16,24,40,.18);
  display:flex;flex-direction:column;overflow:hidden;
  font-family:inherit;
}
.hp-pop__body{
  flex:1;overflow:auto;padding:16px 18px;
  font-size:14px;line-height:1.7;color:#1b2430;-webkit-overflow-scrolling:touch;
}
.hp-pop__body :first-child{margin-top:0;}
.hp-pop__body :last-child{margin-bottom:0;}
.hp-pop__body img{max-width:100%;height:auto;display:block;}
.hp-pop__body h3{font-size:17px;font-weight:700;margin:0 0 8px;letter-spacing:-.01em;}
.hp-pop__body p{margin:0 0 8px;}
.hp-pop__body a{color:#2f5bd7;}

/* 아래 띠 — 왼쪽은 다시 안 보기, 오른쪽은 그냥 닫기 */
.hp-pop__bar{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-top:1px solid #e3e6ea;background:#f6f8fa;
}
.hp-pop__chk{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:12px;color:#5b6472;user-select:none;
}
.hp-pop__chk input{cursor:pointer;margin:0;}
.hp-pop__close{
  border:1px solid #d7dbe0;background:#fff;border-radius:2px;
  padding:5px 14px;font-size:12px;font-weight:600;color:#1b2430;cursor:pointer;
}
.hp-pop__close:hover{border-color:#1b2430;}

/* 좁은 화면에서는 담당자가 적은 가로 · 위치를 따르지 않는다 —
   400px 짜리 창도 390px 화면에서는 넘치고, 넘치면 페이지 전체가 가로로 밀린다 */
@media (max-width:640px){
  .hp-pop{
    left:16px !important;right:16px;width:auto !important;
    max-height:78vh;height:auto !important;
  }
  .hp-pop__body{max-height:62vh;}
}