/* =============================================================
   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;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    --ball-bg: var(--lng-lotto);
    background: var(--ball-bg);
    border: 2px solid transparent;   /* 채운 볼과 테두리 볼의 크기를 같게 유지 */
    margin: 2px;
}
.ball.bonus { --ball-bg: var(--lng-bonus); color: #3f4254; }
.ball.pension { --ball-bg: var(--lng-pension); border-radius: 10px; }
/* 미적중 / 추첨 전 — 테두리만 (당첨번호에 포함된 번호만 색을 채운다) */
.ball.miss {
    background: transparent;
    color: #3f4254;
    border-color: var(--ball-bg);
}
.ball.miss.pension { background: transparent; color: #3f4254; border-color: var(--ball-bg); }
/* 라벨 배지 (조/보너스/전조 등) — 직사각형, 글자 수에 맞게 늘어남 (연금 숫자 배지와 모서리 통일) */
.ball.group {
    background: var(--lng-group);
    border-radius: 8px;
    width: auto;
    min-width: 40px;
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;  /* "1조"/"보너스"가 줄바꿈·잘림되는 것 방지 */
    flex: 0 0 auto;
}
.ball.sm { width: 30px; height: 30px; font-size: 13px; }
.ball.sm.group { min-width: 30px; padding: 0 8px; font-size: 12px; }
.ball.lg { width: 44px; height: 44px; font-size: 18px; }
.ball.lg.group { min-width: 44px; }

/* 번호 한 줄 유지 (줄바꿈 방지) + 가로 스크롤 허용 */
.ball-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow-x: auto; }
.ball-row .ball { flex: 0 0 auto; }

/* 모바일: 번호 6개(+조/보너스)가 한 줄에 들어가도록 축소 */
@media (max-width: 520px) {
    .ball { width: 34px; height: 34px; font-size: 14px; margin: 1px; }
    .ball.sm { width: 30px; height: 30px; font-size: 12px; }
    .ball.lg { width: 38px; height: 38px; font-size: 15px; }
    .ball-row { gap: 3px; }
}
@media (max-width: 380px) {
    .ball { width: 30px; height: 30px; font-size: 13px; }
    .ball.sm { width: 27px; height: 27px; font-size: 11px; }
}

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

/* ---- 처리중 로더 (SVM ajax_coverpopup_box 이식) ---- */
.lng-loader-box {
    display: block; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); z-index: 100000;
}
.lng-loader-box .lng-loader-img {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8rem; height: 8rem;
}
.lng-loader-box .lng-loader-img img { width: 100%; height: 100%; }

/* 라벨 배지 너비 최종 보정 — .ball.sm/.lg 및 모바일 미디어쿼리의 고정 너비가
   .ball.group의 auto를 덮어쓰지 않도록 파일 끝에서 강제 (보너스 글자 잘림 방지) */
.ball.group, .ball.sm.group, .ball.lg.group {
    width: auto;
    overflow: visible;
}