/* 📢 사이트 공지·이벤트·알림·점검 모달 — 후원 모달(donate)과 같은 톤. 2026-07-26 */
@keyframes sntPop { 0%{transform:scale(.4);opacity:0} 55%{transform:scale(1.06);opacity:1} 75%{transform:scale(.97)} 100%{transform:scale(1)} }

.snt-back { position: fixed; inset: 0; z-index: 99998; background: rgba(30,20,10,.5);
  display: none; align-items: center; justify-content: center; padding: 16px; }
html.snt-open, html.snt-open body { overflow: hidden; }              /* 모달 뜨면 뒤 스크롤 잠금 */

.snt-card { width: 340px; max-width: 100%; box-sizing: border-box; position: relative; text-align: center;
  background: #fff; border-radius: 18px; padding: 26px 22px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
  animation: sntPop .42s ease-out; max-height: 86vh; overflow-y: auto; }

.snt-x { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%;
  border: none; background: #f4efe7; color: #8a7a66; font-size: 15px; font-weight: bold; cursor: pointer;
  padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.snt-x:active { transform: scale(.92); }

.snt-ic { margin-bottom: 6px; line-height: 0; }
.snt-ic .snt-emo { height: 62px; width: auto; }                       /* 공지·이벤트 = 게임 이모지 그림 */
.snt-ic .snt-svg { width: 44px; height: 44px; }                       /* 알림 = SVG */
.snt-alert .snt-ic { color: #e8730c; }

.snt-kind { display: inline-block; font-size: 11.5px; font-weight: bold; color: #fff; background: #e8730c;
  padding: 3px 11px; border-radius: 11px; margin-bottom: 9px; letter-spacing: .3px; }

.snt-ttl { font-size: 18px; font-weight: bold; color: #3d3226; margin-bottom: 8px; word-break: keep-all; line-height: 1.4; }
.snt-body { font-size: 14.5px; color: #5f5347; line-height: 1.75; text-align: left; word-break: keep-all; overflow-wrap: break-word; }
.snt-body img, .snt-body video, .snt-body iframe { max-width: 100%; height: auto; border-radius: 10px; }
.snt-body p { margin: 0 0 10px; }
.snt-body:empty { display: none; }

/* 📦 강조 박스 — 색은 관리자가 고른 값이 --sbg(배경) --sfg(글씨) --shc(하트)로 들어옴 */
.snt-box { position: relative; overflow: hidden; border-radius: 16px; padding: 20px 16px 18px; text-align: center;
  background: var(--sbg, #eaf3ff); box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.snt-box-in { position: relative; z-index: 2; }
.snt-box img, .snt-box video, .snt-box iframe { max-width: 100%; height: auto; border-radius: 10px; }
.snt-box .snt-p { margin: 0 0 8px; font-size: 14px; line-height: 1.65; word-break: keep-all;
  color: var(--sfg, #17408b); opacity: .78; }
.snt-box .snt-p1 { font-size: 16.5px; font-weight: bold; line-height: 1.55; opacity: 1; }
.snt-box .snt-p:last-child { margin-bottom: 0; }
/* ✨ *별표* 로 감싼 글자 = 두껍게 + 강조색 */
.snt-box b, .snt-box strong, .snt-body b, .snt-body strong { color: var(--sem, #3182f6); font-weight: bold; }

/* 💙 하트 — 밑에서 위로. CSS 애니메이션이라 서버·자바스크립트 부담 0 */
/* 하트마다 위치(--x) 시작시간(--d) 도는속도(--t) 크기(--s) 흔들림폭(--w) 이 전부 다르다 → 줄이 안 생긴다 */
.snt-hearts { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.snt-hearts i { position: absolute; left: var(--x); bottom: -18px; opacity: 0;
  width: var(--s, 13px); height: var(--s, 13px);
  background: var(--shc, #3182f6);
  -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat;
  --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-8-5.1-8-10.4A4.7 4.7 0 0 1 12 7a4.7 4.7 0 0 1 8 3.6C20 15.9 12 21 12 21z'/></svg>");
  animation: sntUp var(--t, 4.2s) linear infinite; animation-delay: var(--d); }
@keyframes sntUp {
  0%   { transform: translate(0, 0) scale(.6) rotate(-8deg); opacity: 0; }
  14%  { opacity: .9; }
  50%  { transform: translate(var(--w, 0px), -76px) scale(1) rotate(6deg); }
  74%  { opacity: .5; }
  100% { transform: translate(0, -152px) scale(1.1) rotate(-4deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .snt-hearts { display: none; } }

.snt-go { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box;
  margin-top: 16px; padding: 13px; border-radius: 13px; font-size: 15.5px; font-weight: bold;
  text-decoration: none; background: #e8730c; color: #fff; border: 2px solid #e8730c; }
.snt-go:active { transform: translateY(2px); }
.snt-event .snt-go { background: #d6336c; border-color: #d6336c; }
.snt-alert .snt-go { background: #e0922e; border-color: #e0922e; }

.snt-today { width: 100%; box-sizing: border-box; margin-top: 9px; padding: 11px; border-radius: 13px;
  font-size: 13.5px; font-weight: bold; font-family: inherit; cursor: pointer;
  background: #fff; color: #a8987f; border: 1.5px solid #f0e8dc; }
.snt-today:hover { background: #faf5ee; }

/* 🔧 점검 = 게임(서리 키우기)과 똑같은 전체화면. 닫기 버튼 없음 · 뒤 화면 아무것도 못 누름 */
.snt-maint-screen { position: fixed; inset: 0; z-index: 99999; background: rgba(40,28,14,.94);
  display: none; align-items: center; justify-content: center; flex-direction: column;
  text-align: center; color: #fff; padding: 24px; }
.snt-maint-screen .snt-m-ic { line-height: 0; }
.snt-maint-screen .snt-m-emo { height: 62px; width: auto; }
.snt-maint-screen .snt-m-ttl { font-size: 22px; font-weight: bold; margin-top: 12px; word-break: keep-all; }
.snt-maint-screen .snt-m-msg { font-size: 15px; margin-top: 10px; opacity: .9; max-width: 340px;
  line-height: 1.55; word-break: keep-all; }
.snt-maint-screen .snt-m-msg p { margin: 0 0 8px; }
.snt-maint-screen .snt-m-msg p:last-child { margin-bottom: 0; }
.snt-maint-screen .snt-m-msg img { max-width: 100%; height: auto; border-radius: 10px; }

@media (max-width: 480px) {
  .snt-card { padding: 22px 18px 18px; }
  .snt-ic .snt-emo { height: 54px; }
  .snt-ttl { font-size: 16.5px; }
  .snt-body { font-size: 14px; }
  .snt-box .snt-p1 { font-size: 15.5px; }
  .snt-maint-screen .snt-m-emo { height: 54px; }
  .snt-maint-screen .snt-m-ttl { font-size: 19px; }
}