@charset "utf-8";
/* addon — 관리자 연동으로 새로 생긴 화면 요소.
   공지 검색·이전/다음 글·상단 고정 표시, 판매 중 배지, 메인 팝업.
   색·크기는 theme.css 의 변수를 쓴다. */

/* 자동 등록 프로그램만 채우는 칸. 사람에게는 보이지도 읽히지도 않게 한다. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- 공지 목록 ---------- */
.notice_tools{ display:flex; align-items:center; justify-content:space-between; gap:1.6rem; margin-bottom:1.6rem; }
.notice_tools .total{ margin-bottom:0; }
.notice_search{ display:flex; gap:.6rem; }
.notice_search input{
  width:22rem; height:4rem; padding:0 1.2rem; font-size:1.6rem;
  border:1px solid var(--border2); border-radius:.4rem; color:var(--fontColor); background:var(--white);
}
.notice_search button{
  height:4rem; padding:0 1.6rem; font-size:var(--fs-sm); font-weight:600;
  border-radius:.4rem; background:var(--btnBlack); color:var(--white); cursor:pointer;
}
.notice_search button:hover{ background:var(--subColor); }
.notice_table tr.is_top td.tit a{ font-weight:600; }
.notice_table .top_mark{
  display:inline-block; padding:.3rem .8rem; border-radius:2rem;
  font-size:1.2rem; font-weight:700; color:var(--subColor); background:var(--mainBgColor);
}
.notice_table td.empty{ padding:6rem 0; color:var(--muted); }
.notice .pagination{ margin-top:4rem; }

/* ---------- 공지 보기 ---------- */
.notice .view_attach{ margin-top:3rem; }
.notice .view_attach a{ color:var(--subColor); text-decoration:underline; }
.notice .view_near{ margin-top:4rem; border-top:1px solid var(--border2); }
.notice .view_near li{
  display:flex; gap:2rem; align-items:baseline; padding:1.6rem .4rem;
  border-bottom:1px solid var(--border); font-size:var(--fs-sm);
}
.notice .view_near .label{ flex:none; width:6rem; color:var(--muted); font-size:var(--fs-sm); }
.notice .view_near a{ color:var(--btnBlack); font-size:var(--fs-sm); }
.notice .view_near a:hover{ color:var(--subColor); text-decoration:underline; }
.notice .view_near .none{ color:var(--muted); font-size:var(--fs-sm); }

/* ---------- 판매처 ---------- */
.support .badge.open{ background:var(--subColor); color:var(--white); }
.support .ch_name a{ color:inherit; font:inherit; text-decoration:underline; text-underline-offset:.3em; }

/* ---------- 메인 팝업 ---------- */
.hs-popups{ position:fixed; top:11rem; left:4rem; z-index:900; display:flex; gap:1.6rem; align-items:flex-start; pointer-events:none; }
.hs-popup{
  pointer-events:auto; width:36rem; max-width:calc(100vw - 3.2rem);
  background:var(--white); border-radius:1.2rem; overflow:hidden;
  box-shadow:0 1.6rem 4.8rem rgba(11,43,58,.22);
}
.hs-popup[hidden]{ display:none; }
.hs-popup__body img{ display:block; width:100%; height:auto; }
.hs-popup__tit{ padding:2.8rem 2.4rem 0; font-size:var(--fs-h3); font-weight:700; color:var(--btnBlack); line-height:1.4; }
.hs-popup__txt{ padding:1.2rem 2.4rem 0; font-size:var(--fs-sm); line-height:1.7; color:var(--fontProDesc); }
.hs-popup__link{ display:inline-block; margin:1.6rem 2.4rem 0; font-size:var(--fs-sm); font-weight:600; color:var(--subColor); text-decoration:underline; }
.hs-popup__body{ padding-bottom:2.4rem; }
.hs-popup__body:has(img){ padding-bottom:0; }
.hs-popup__foot{ display:flex; justify-content:space-between; background:var(--btnBlack); }
.hs-popup__foot button{ padding:1.3rem 1.8rem; font-size:1.3rem; color:var(--white80); background:none; cursor:pointer; }
.hs-popup__foot button:hover{ color:var(--white); }

@media (max-width:1023px){
  .notice_tools{ flex-direction:column; align-items:stretch; padding:0 var(--page-pad); }
  .notice_search input{ flex:1; width:auto; min-width:0; }
  .notice .view_near li{ gap:1.2rem; }
  .notice .view_near .label{ width:5rem; }
  .hs-popups{ top:auto; bottom:1.6rem; left:1.6rem; right:1.6rem; flex-direction:column; }
  .hs-popup{ width:100%; }
  .hs-popup + .hs-popup{ display:none; }   /* 좁은 화면에서는 한 장만 */
}

/* 관리자 편집기로 만든 팝업: 안에 든 그림이 상자를 넘지 않게 */
.hs-popup__body img{ max-width:100%; height:auto; }
.hs-popup__body > p{ padding:0 2.4rem; font-size:var(--fs-sm); line-height:1.7; }

/* 이용약관·개인정보처리방침 본문 (관리자 › 페이지 관리에서 고치는 HTML) */
.dl-doc.agreement,.dl-doc.privacy{border:1px solid rgba(0,0,0,.1);border-radius:2px;padding:4rem;max-width:96rem;margin:0 auto;font-family:"Pretendard",sans-serif;font-size:1.5rem;line-height:1.75;color:#333;word-break:keep-all;overflow-wrap:break-word}
.dl-doc .pol-date{text-align:right;color:#888;font-size:1.4rem;margin:0 0 2.4rem}
.dl-doc .pol-lead{margin:0 0 1.2rem;color:#222}
.dl-doc .pol-h{font-size:1.8rem;font-weight:700;color:#111;margin:4rem 0 1.2rem;padding-top:2.4rem;border-top:1px solid rgba(0,0,0,.08);line-height:1.4}
.dl-doc .pol-h:first-of-type{margin-top:3.2rem}
.dl-doc p{margin:0 0 1rem}
.dl-doc .pol-list{list-style:decimal;padding-left:2.2rem;margin:0 0 1.2rem}
.dl-doc .pol-list>li{display:list-item;list-style:decimal outside;margin:.4rem 0;padding-left:.4rem}
.dl-doc ul.pol-list>li{list-style-type:disc}
.dl-doc .pol-table{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:1.4rem;display:table}
.dl-doc .pol-table th,.dl-doc .pol-table td{border:1px solid rgba(0,0,0,.12);padding:1rem 1.2rem;text-align:left;vertical-align:top}
.dl-doc .pol-table th{background:#f6f6f4;font-weight:600;color:#111;white-space:nowrap}
.dl-doc .pol-box{margin-top:3.2rem;padding:2rem 2.4rem;background:#f6f6f4;border-radius:2px}
.dl-doc .pol-box p{margin:.2rem 0}
@media (max-width:768px){
  .dl-doc.agreement,.dl-doc.privacy{padding:2.4rem 1.6rem;font-size:1.4rem}
  .dl-doc .pol-h{font-size:1.6rem;margin-top:3.2rem;padding-top:2rem}
  .dl-doc .pol-table{font-size:1.3rem}
  .dl-doc .pol-table th,.dl-doc .pol-table td{padding:.8rem .8rem}
  .dl-doc .pol-table th{white-space:normal}
}