/* 메인 첫 화면 오른쪽: 누적 숫자 카드 + 최근 사건 결과 (마약센터 첫 화면과 같은 디자인, 2026-10-22)
   옛 메인 CSS와 섞이지 않도록 .dv 아래에만 둔다 */
.dv{--ac:#8b6cf0;--ac-rgb:139,108,240;--ac-l:#ddd4fb;font-family:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;letter-spacing:-.03em;color:#fff;word-break:keep-all}
.dv *{box-sizing:border-box;margin:0;padding:0;font-family:inherit;letter-spacing:inherit}
.dv a{color:inherit;text-decoration:none}
.dv-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
.dv-card{border:1px solid #fff;border-radius:10px;padding:10px;background:center/cover no-repeat;position:relative;overflow:hidden}
.dv-card:before{content:"";position:absolute;inset:0;background:rgba(10,14,30,.5)}
.dv-card .in{position:relative;text-align:center;padding:20px 6px 22px}
.dv-card .t{font-size:16px;font-weight:600;line-height:1.5}
.dv-card .box{display:inline-flex;align-items:baseline;gap:4px;margin-top:12px;padding:12px 22px;border:1px solid rgba(255,255,255,.8);border-radius:6px;background:rgba(255,255,255,.06)}
.dv-card .n{font-size:clamp(28px,2.4vw,38px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.dv-card .u{font-size:16px;font-weight:600;white-space:nowrap}
@property --dva{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes dvSpin{to{--dva:360deg}}
@keyframes dvPulse{0%{box-shadow:0 0 0 0 rgba(var(--ac-rgb),.55)}70%{box-shadow:0 0 0 6px rgba(var(--ac-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--ac-rgb),0)}}
@keyframes dvRow{to{opacity:1;transform:none}}
.dv-recent{grid-column:1/-1;position:relative;border:1.5px solid transparent;border-radius:10px;padding:24px 26px 20px;
  background:linear-gradient(160deg,rgba(32,30,66,.96),rgba(20,20,40,.96)) padding-box,
  conic-gradient(from var(--dva,0deg),rgba(var(--ac-rgb),.15),var(--ac) 40deg,var(--ac-l) 70deg,rgba(var(--ac-rgb),.15) 120deg,rgba(77,105,226,.5) 220deg,rgba(var(--ac-rgb),.15)) border-box;
  animation:dvSpin 6s linear infinite;box-shadow:0 18px 50px rgba(var(--ac-rgb),.18),0 0 0 1px rgba(255,255,255,.04)}
.dv-recent h2{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;color:#fff;margin-bottom:12px;line-height:1.5}
.dv-recent h2 .live{width:9px;height:9px;border-radius:50%;background:var(--ac);animation:dvPulse 1.8s ease-out infinite;flex-shrink:0}
.dv-recent h2 .tag{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--ac-l);padding:4px 9px;border:1px solid rgba(var(--ac-rgb),.5);border-radius:4px}
.dv-recent ul{list-style:none}
.dv-recent li{border-top:1px solid rgba(255,255,255,.12);opacity:0;transform:translateX(18px);animation:dvRow .6s ease forwards;transition:background .25s}
.dv-recent li:first-child{border-top:0}
.dv-recent li:nth-child(1){animation-delay:.3s}.dv-recent li:nth-child(2){animation-delay:.45s}.dv-recent li:nth-child(3){animation-delay:.6s}
.dv-recent li a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 4px}
.dv-recent li span{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-recent li b{font-size:17px;font-weight:800;color:#fff;white-space:nowrap;text-align:right;background:linear-gradient(transparent 66%,rgba(var(--ac-rgb),.6) 66%,rgba(var(--ac-rgb),.6) 96%,transparent 96%);padding:0 2px}
.dv-recent .more{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:rgba(255,255,255,.55)}
.dv-recent .more a{flex-shrink:0;font-size:14px;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.6)}
@media (hover:hover){.dv-recent li:hover{background:rgba(255,255,255,.05)}.dv-recent li a:hover b{text-decoration:underline;text-underline-offset:4px}}
@media (max-width:640px){
  .dv-cards{gap:10px}
  .dv-card .in{padding:14px 2px 16px}
  .dv-card .t{font-size:14px}
  .dv-card .box{padding:10px 12px}
  .dv-card .u{font-size:13px}
  .dv-recent{padding:18px 16px 14px}
  .dv-recent li a{flex-direction:column;align-items:flex-start;gap:2px}
  .dv-recent li span{white-space:normal}
  .dv-recent li b{font-size:15.5px;text-align:left;white-space:normal}
}
@media (prefers-reduced-motion:reduce){.dv-recent,.dv-recent h2 .live{animation:none}.dv-recent li{animation:none;opacity:1;transform:none}}
/* 옛 메인 오른쪽 칸 크기 맞춤 */
.main .visual-section .half-div .right-div.dv{width:540px;display:block}
@media (max-width:1400px){.main .visual-section .half-div .right-div.dv{width:460px}}
@media (max-width:1024px){.main .visual-section .half-div .right-div.dv{width:100%;max-width:620px}}
/* 오른쪽 떠 있는 상담 버튼(floating-menu)에 결과 문구가 가리지 않게 */
@media (min-width:1025px) and (max-width:1560px){.main .visual-section .half-div .right-div.dv{width:430px;margin-right:72px}}