/* BASIC css start */
/* =========================================================
   미니어몰 이벤트 팝업 (카드형)
   ========================================================= */
#specialEvt, #specialEvt * { box-sizing: border-box; }
#specialEvt {
  --ink: #1f2a30; --sub: #66737a; --line: #e3e8ea; --soft: #f4f8f9; --brand-deep: #3d7686;
  margin: 0; padding: 0; background: #fff;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(31, 42, 48, .12);
  box-shadow: 0 16px 48px rgba(20, 30, 36, .25), 0 2px 8px rgba(20, 30, 36, .1);
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  letter-spacing: -0.02em; word-break: keep-all;
}
#specialEvt .tit-pop { text-align: center; }

/* 이미지 영역 */
#specialEvt .cont-pop, #specialEvt .cont { margin: 0; padding: 0; }
#specialEvt .cont { font-size: 14px; line-height: 1.6; color: var(--ink); }
#specialEvt .cont img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; border: 0; }
#specialEvt .mep-img a { display: block; }

/* 하단 2분할 버튼 */
#specialEvt .close-wrap { position: relative; padding: 0; background: #fff; border-top: 1px solid var(--line); color: var(--ink); }
#specialEvt .close-wrap .close { display: flex; width: 100%; height: 50px; margin: 0; text-align: center; }
#specialEvt .mep-today,
#specialEvt .close-wrap .close .btn-close {
  position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  height: 100%; margin: 0; font-size: 14px; text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s;
}
#specialEvt .mep-today { color: var(--sub); user-select: none; }
#specialEvt .mep-today::after {
  content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 16px;
  margin-top: -8px; background: var(--line);
}
#specialEvt .close-wrap .close .btn-close { font-weight: 700; color: var(--ink); }
#specialEvt .mep-today:hover,
#specialEvt .close-wrap .close .btn-close:hover { background: var(--soft); }
#specialEvt .mep-today:hover { color: var(--ink); }

/* 체크박스는 숨기고 문구 전체를 버튼처럼 */
#specialEvt .mep-today input[type=checkbox] {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0;
}
#specialEvt .mep-today:focus-within,
#specialEvt .btn-close:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: -2px; }

/* 자세히 보기 (팝업 이미지에 클릭 링크를 건 경우) */
#specialEvt .close-wrap .close .pop-more {
  position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 3px;
  height: 100%; margin: 0; font-size: 14px; font-weight: 700; color: var(--brand-deep);
  text-decoration: none; cursor: pointer; transition: background .15s;
}
#specialEvt .close-wrap .close .pop-more::after { content: "\203A"; font-size: 18px; line-height: 1; }
#specialEvt .close-wrap .close .pop-more:hover { background: var(--soft); }
#specialEvt .close-wrap .close .pop-more:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: -2px; }

/* 오른쪽 위 닫기 X */
#specialEvt { position: relative; }
#specialEvt .pop-x {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(20, 30, 36, .5); transition: background .15s;
}
#specialEvt .pop-x:hover { background: rgba(20, 30, 36, .75); }
#specialEvt .pop-x::before, #specialEvt .pop-x::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px; background: #fff;
  transform: rotate(45deg);
}
#specialEvt .pop-x::after { transform: rotate(-45deg); }
#specialEvt .pop-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* BASIC css end */