/****************************************************
 * TOTOLINE - mt_site 위젯 전용 CSS (톤 통일 + 레드 포인트)
 ****************************************************/
.premt-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* 한 줄에 3개 (가능하면) */
.premt-card {
    flex: 1 1 calc(33.333% - 14px);
    min-width: 260px;

    display: block;
    padding: 22px 20px;
    border-radius: 14px;

    /* 기본 톤은 토토라인 카드와 통일, 레드는 하이라이트만 */
    background:
        radial-gradient(circle at 5% -10%, rgba(255, 95, 95, 0.22) 0%, transparent 45%),
        radial-gradient(circle at 100% 120%, rgba(255, 70, 70, 0.20) 0%, transparent 55%),
        linear-gradient(140deg, #2b2d40 0%, #1f202f 55%, #171823 100%);

    border: 1px solid rgba(255, 110, 110, 0.35);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.40),
        0 4px 16px rgba(0,0,0,0.55),
        0 0 14px rgba(255, 70, 70, 0.26);

    text-decoration: none;
    color: #f1f2f6;
    transition: 0.28s ease;
}

.premt-card:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 0 18px rgba(255, 90, 90, 0.30),
        0 10px 26px rgba(0,0,0,0.75),
        0 0 20px rgba(255, 80, 80, 0.40);
    border-color: rgba(255, 130, 130, 0.75);
}

/* 상단 */
.premt-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.premt-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: #f6f7ff;
}

.premt-date {
    font-size: 13px;
    color: #a0a7cb;
}

/* 기본 row (가로 정렬) */
.premt-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

/* label/value 색상 */
.premt-label {
    color: #9aa1b8;
    font-size: 13px;
}

.premt-value {
    color: #e4e8ff;
    font-weight: 500;
}

.premt-domain {
    color: #9fd3ff;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}

/* 세로 정렬 전용 (도메인 생성일) */
.premt-row-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}

.premt-row-vertical .premt-label {
    font-size: 13px;
    color: #9aa1b8;
}

.premt-row-vertical .premt-value {
    font-size: 14px;
    color: #f0f2ff;
    font-weight: 600;
}

/* 피해금액 강조 */
.premt-money {
    color: #ffda70;
    font-weight: 700;
}

/* 구분선 */
.premt-line {
    margin: 14px 0 12px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.02),
        rgba(255,120,120,0.55),
        rgba(255,255,255,0.02)
    );
}

/* 버튼 */
.premt-btn-wrap {
    margin-top: 10px;
    text-align: right;
}

/* 위험사이트 이동 버튼 (레드 네온) */
.premt-btn {
    display: inline-block;
    padding: 7px 14px;
    background: linear-gradient(135deg, #ff5a5a 0%, #e72f2f 100%);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.4px;
    box-shadow: 0 0 10px rgba(255, 80, 80, 0.45);
    transition: 0.18s ease;
}

.premt-btn:hover {
    background: linear-gradient(135deg, #ff7878 0%, #ff3e3e 100%);
    box-shadow: 0 0 16px rgba(255, 90, 90, 0.7);
}

/* 반응형: 태블릿에서 2열, 모바일에서 1열 */
@media (max-width: 1024px) {
    .premt-card {
        flex: 1 1 calc(50% - 12px);
    }
}

/* 모바일: 세로 정렬 강제 */
@media (max-width: 600px) {
    .premt-grid {
        grid-template-columns: repeat(1, 1fr) !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    .premt-card {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: auto !important; /* ★ 핵심 */
    }
}