/* =============================================================
   JSJYFAMILY_LNG 컴포넌트 스타일 — Metronic(SVM 테마) 보완용
   페이지 뼈대는 Metronic이 담당, 여기는 복권 도메인 컴포넌트만.
   ============================================================= */

:root {
    --lng-lotto: #009ef7;    /* Metronic primary와 동일 계열 (로또) */
    --lng-pension: #7239ea;  /* Metronic info/보라 (연금) */
    --lng-bonus: #ffc700;    /* Metronic warning (보너스) */
    --lng-group: #7e8299;    /* gray-600 (조) */
}

/* ---- 번호 배지 (전 화면·메일 공통) ---- */
.ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    background: var(--lng-lotto);
    margin: 2px;
}
.ball.bonus { background: var(--lng-bonus); color: #3f4254; }
.ball.pension { background: var(--lng-pension); border-radius: 10px; }
.ball.group { background: var(--lng-group); }
.ball.sm { width: 30px; height: 30px; font-size: 13px; }
.ball.lg { width: 44px; height: 44px; font-size: 18px; }

/* 로또 공식 볼 색상 (동행복권 동일): 1~10 노랑 / 11~20 파랑 / 21~30 빨강 / 31~40 회색 / 41~45 초록 */
.ball.lotto-c1 { background: #fbc400; }
.ball.lotto-c2 { background: #69c8f2; }
.ball.lotto-c3 { background: #ff7272; }
.ball.lotto-c4 { background: #aaaaaa; }
.ball.lotto-c5 { background: #b0d840; }

/* ---- 로또 마킹지 배열 (모바일 구매 뷰) ---- */
.paper-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.paper-grid span {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: 4px;
    color: #7e8299;
    background: #f5f8fa;
}
.paper-grid span.mark { background: var(--lng-lotto); color: #fff; font-weight: 700; }

/* ---- 적중 추이 미니바 (알고리즘 상세) ---- */
.trend { display: flex; gap: 4px; align-items: flex-end; height: 48px; }
.trend > div { width: 14px; background: var(--lng-lotto); border-radius: 3px 3px 0 0; opacity: .85; }

/* ---- 가중치 바 ---- */
.weight-bar { height: 6px; border-radius: 3px; background: #eff2f5; overflow: hidden; }
.weight-bar > div { height: 100%; background: var(--lng-lotto); }