@charset "utf-8";

/* ==================================================================
   로또 페이지 - 픽셀 아케이드 테마

   도트 느낌은 그대로 두되, 읽는 글씨는 크고 밝게 간다.
   본문용으로 Galmuri14 를 따로 등록했다. Galmuri11 을 12~13px 로
   늘려 쓰면 획이 뭉개져서, 설명글은 14px 네이티브 크기로 읽힌다.
   숫자·제목처럼 큼직한 자리만 Galmuri11 을 쓴다.
   ================================================================== */

@font-face {
    font-family: Galmuri14;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Galmuri14'), url('/font/Galmuri14.woff2') format('woff2');
}

.lotto {
    --px: 4px;                    /* 픽셀 한 칸 */
    --panel: #1b1b24;
    --panel-2: #262633;
    --panel-3: #30303f;
    --line: #4a4a5f;
    --line-soft: #3a3a4a;

    /* 보조 텍스트. 예전 #8b8b9e 는 패널 위에서 대비가 모자랐다. */
    --dim: #a9a9c4;
    --read: #cfcfe2;

    --font-px: 'Galmuri11', 'Pretendard', monospace;
    --font-read: 'Galmuri14', 'Galmuri11', 'Pretendard', sans-serif;

    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 16px 96px;
    color: var(--text-color);
    font-family: var(--font-read);
    font-size: 14px;
    line-height: 1.8;
    image-rendering: pixelated;
}

/* 스캔라인. 아케이드 CRT 느낌만 아주 살짝.
   예전 값(.22)은 글자 위에 그늘을 만들어 작은 글씨를 더 안 보이게 했다. */
.lotto::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0 2px,
        rgba(0, 0, 0, .10) 2px 4px
    );
    mix-blend-mode: multiply;
}
.lotto > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ */
/* 픽셀 패널 - 둥근 모서리 대신 계단식 그림자로 각을 세운다              */
/* ------------------------------------------------------------------ */
.px_panel {
    background: var(--panel);
    border: var(--px) solid var(--line);
    box-shadow: var(--px) var(--px) 0 0 #000, calc(var(--px) * 2) calc(var(--px) * 2) 0 0 rgba(0, 0, 0, .45);
    padding: 24px;
    margin-bottom: 26px;
}
.px_panel.accent { border-color: var(--accent-color); }
.px_panel.hot { border-color: var(--primary-color); }
.px_panel.warn { border-color: var(--secondary-color); }

.px_title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-px);
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .5px;
    line-height: 1.5;
    color: var(--secondary-color);
    text-transform: uppercase;
    margin-bottom: 16px;
}
.px_title::before {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    box-shadow: 0 -4px 0 var(--secondary-color), 4px 0 0 var(--accent-color);
    flex: 0 0 auto;
}

/* 패널 제목 + 오른쪽 버튼 */
.panel_head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.panel_head .px_title { margin-bottom: 16px; }

/* 패널 머리말. 이 패널이 무엇인지 한 문단으로 설명한다. */
.panel_lead {
    font-size: 14px;
    line-height: 1.9;
    color: var(--read);
    margin-bottom: 18px;
}
.panel_lead b { color: var(--accent-color); font-weight: bold; }

/* 패널 안의 작은 제목 */
.sub_title {
    font-family: var(--font-px);
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: .3px;
}

/* ------------------------------------------------------------------ */
/* 헤더                                                                */
/* ------------------------------------------------------------------ */
.lotto_head { text-align: center; margin-bottom: 30px; }
.lotto_head h1 {
    font-family: var(--font-px);
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.25;
    font-weight: bold;
    color: #fff;
    text-shadow:
        var(--px) var(--px) 0 var(--primary-color),
        calc(var(--px) * 2) calc(var(--px) * 2) 0 rgba(0, 0, 0, .6);
    margin-bottom: 16px;
}
.lotto_head .lead {
    font-size: 15px;
    line-height: 2;
    color: var(--read);
    max-width: 680px;
    margin: 0 auto;
}
.lotto_head .lead b { color: var(--accent-color); }
.blink { animation: px_blink 1.1s steps(1) infinite; color: var(--secondary-color); }
@keyframes px_blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* ------------------------------------------------------------------ */
/* 국가 선택 탭                                                        */
/* ------------------------------------------------------------------ */
.country_tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}
.country_tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    text-decoration: none;
    background: var(--panel-2);
    border: var(--px) solid var(--line);
    color: var(--dim);
    transition: .12s;
    min-height: 68px;
    justify-content: center;
}
.country_tabs a:hover { color: #fff; border-color: var(--accent-color); transform: translate(-2px, -2px); box-shadow: 2px 2px 0 #000; }
.country_tabs a.on {
    color: #111;
    background: var(--secondary-color);
    border-color: #fff;
    box-shadow: var(--px) var(--px) 0 var(--primary-color);
}
.country_tabs .cc { font-family: var(--font-px); font-size: 17px; font-weight: bold; letter-spacing: 1px; }
.country_tabs .cn { font-size: 14px; line-height: 1.4; }

/* ------------------------------------------------------------------ */
/* 볼                                                                  */
/* ------------------------------------------------------------------ */
.balls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ball {
    --size: 54px;
    width: var(--size);
    height: var(--size);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-px);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -1px;
    font-weight: bold;
    color: #14141a;
    background: #999;
    border-radius: 50%;
    box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .28), inset 3px 3px 0 rgba(255, 255, 255, .45), 3px 3px 0 rgba(0, 0, 0, .55);
    text-decoration: none;
    transition: box-shadow .12s;
}
a.ball:hover { box-shadow: inset -3px -4px 0 rgba(0,0,0,.28), inset 3px 3px 0 rgba(255,255,255,.45), 5px 5px 0 rgba(0,0,0,.6); }

.ball.b1 { background: #ffc900; }
.ball.b2 { background: #7fd2f7; }
.ball.b3 { background: #ff8484; }
.ball.b4 { background: #c4c4d2; }
.ball.b5 { background: #bde04c; }
/* 특별번호(파워볼·블루볼)는 어두운 글자로 둬야 대비가 산다. */
.ball.special { background: var(--primary-color); color: #14141a; }

.ball.lg { --size: 66px; font-size: 30px; }
.ball.sm { --size: 42px; font-size: 20px; }
.ball.xs { --size: 36px; font-size: 17px; }

/* 적중 검증에서 맞은 번호 / 빗나간 번호 */
.ball.hit {
    box-shadow:
        inset -3px -4px 0 rgba(0, 0, 0, .28),
        inset 3px 3px 0 rgba(255, 255, 255, .45),
        0 0 0 3px #fff,
        0 0 0 6px var(--thirdary-color);
}
.ball.miss { opacity: .32; filter: grayscale(1); }

.ball_plus {
    font-family: var(--font-px);
    font-size: 22px;
    font-weight: bold;
    color: var(--dim);
    padding: 0 2px;
    align-self: center;
}
.ball_tag { font-size: 13px; color: var(--dim); align-self: center; margin-left: 4px; }

/* ------------------------------------------------------------------ */
/* 최신 결과                                                           */
/* ------------------------------------------------------------------ */
.latest_meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-bottom: 20px; }
.latest_meta .no { font-family: var(--font-px); font-size: 28px; font-weight: bold; color: var(--accent-color); }
.latest_meta .date { font-size: 14px; color: var(--read); }
.latest_meta .game { font-size: 13px; color: var(--secondary-color); border: 2px solid var(--secondary-color); padding: 4px 10px; }

/* ------------------------------------------------------------------ */
/* 통계 막대 - 픽셀 블록으로 채운다                                     */
/* ------------------------------------------------------------------ */
.stat_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.stat_row { display: flex; align-items: center; gap: 9px; }
.stat_row .n { flex: 0 0 auto; }
.stat_bar { flex: 1 1 auto; height: 16px; background: #101018; border: 2px solid var(--line-soft); position: relative; overflow: hidden; }
.stat_bar > span {
    display: block;
    height: 100%;
    background: repeating-linear-gradient(90deg, var(--accent-color) 0 6px, #0aa 6px 8px);
}
.stat_bar.hot > span { background: repeating-linear-gradient(90deg, var(--primary-color) 0 6px, #a0155a 6px 8px); }
.stat_row .v { flex: 0 0 auto; font-size: 13px; color: var(--read); min-width: 42px; text-align: right; }

.kv_grid {margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kv {
    background: var(--panel-2);
    border: 2px solid var(--line);
    padding: 15px 12px;
    text-align: center;
}
.kv .k { font-size: 13px; color: var(--dim); margin-bottom: 8px; line-height: 1.5; }
.kv .v { font-family: var(--font-px); font-size: 26px; font-weight: bold; color: var(--secondary-color); line-height: 1.2; }
.kv .u { font-size: 13px; color: var(--dim); margin-left: 3px; font-family: var(--font-read); }

/* ------------------------------------------------------------------ */
/* 버튼 (픽셀)                                                         */
/* ------------------------------------------------------------------ */
.copy_btn {
    font-family: var(--font-read);
    cursor: pointer;
    background: var(--panel-3);
    border: 2px solid var(--line);
    color: #fff;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    transition: .12s;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .55);
}
.copy_btn:hover {
    color: #111;
    background: var(--accent-color);
    border-color: #fff;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, .6);
}
.copy_btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0, 0, 0, .6); }
.copy_btn:focus-visible { outline: 3px solid var(--secondary-color); outline-offset: 2px; }

.copy_btn.done { background: var(--thirdary-color); color: #111; border-color: #fff; }

/* 복사 알림 */
.px_toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 999;
    background: var(--secondary-color);
    color: #111;
    border: 3px solid #fff;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .6);
    padding: 12px 18px;
    font-size: 14px;
    font-family: var(--font-read);
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* 추천 조합                                                           */
/* ------------------------------------------------------------------ */
.reco { display: grid; gap: 14px; }
.reco_item {
    background: var(--panel-2);
    border: var(--px) solid var(--line);
    padding: 16px;
}
.reco_head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.reco_head .tag {
    flex: 0 0 auto;
    font-family: var(--font-px);
    min-width: 104px;
    font-size: 15px;
    font-weight: bold;
    color: #111;
    background: var(--accent-color);
    padding: 7px 10px;
    text-align: center;
    letter-spacing: .3px;
}
.reco_head .span { font-size: 13px; color: var(--dim); flex: 1 1 auto; }
.reco_head .copy_btn { margin-left: auto; }

.reco_item:nth-child(2) .tag { background: #7fd2f7; }
.reco_item:nth-child(3) .tag { background: var(--thirdary-color); }
.reco_item:nth-child(4) .tag { background: #c4c4d2; }
.reco_item:nth-child(5) .tag { background: var(--secondary-color); }

.reco_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--dim);
}
.reco_meta b { font-family: var(--font-px); font-size: 16px; color: #fff; margin: 0 2px; }
.reco_meta i { font-style: normal; color: #8f8fa8; margin-left: 6px; }

.reco_item .desc {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px dashed var(--line-soft);
    font-size: 14px;
    line-height: 1.8;
    color: var(--read);
}

/* 세트에 걸린 규칙 - 이름과 역할만 칩으로 */
.rules {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 2px dashed var(--line-soft);
}
.rule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #15151d;
    border: 2px solid var(--line-soft);
    font-size: 13px;
    color: var(--read);
}
.rule i {
    font-style: normal;
    font-family: var(--font-px);
    font-size: 11px;
    color: #111;
    padding: 1px 5px;
}
/* 이 규칙이 무엇을 바꾸는지에 따라 색을 나눈다. */
.rule.hit i { background: var(--thirdary-color); }
.rule.share i { background: var(--secondary-color); }
.rule.order i { background: #3a3a48; color: #c8c8d8; }

.rule_note {
    flex: 1 1 100%;
    font-size: 12px;
    line-height: 1.8;
    color: var(--dim);
}
.rule_note b { color: var(--read); font-weight: normal; }


/* ------------------------------------------------------------------ */
/* 회차 목록                                                           */
/* ------------------------------------------------------------------ */
.draw_list { display: grid; gap: 8px; }
.draw_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: var(--panel-2);
    border: 2px solid var(--line-soft);
    text-decoration: none;
    color: inherit;
    transition: .12s;
}
.draw_row:hover { border-color: var(--accent-color); transform: translate(-2px, -2px); box-shadow: 2px 2px 0 #000; }
.draw_row .no { font-family: var(--font-px); font-size: 16px; font-weight: bold; color: var(--accent-color); min-width: 96px; }
.draw_row .date { font-size: 13px; color: var(--dim); min-width: 92px; }

/* ------------------------------------------------------------------ */
/* 번호 인덱스 (번호별 통계 페이지로 가는 링크)                          */
/* ------------------------------------------------------------------ */
.num_index { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ */
/* 알림 / 안내                                                         */
/* ------------------------------------------------------------------ */
.notice {
    border: var(--px) solid var(--secondary-color);
    background: #2a2410;
    padding: 18px;
    font-size: 14px;
    line-height: 1.95;
    color: #f0e9c6;
    margin-bottom: 26px;
}
.notice strong { color: var(--secondary-color); }

.pending {
    text-align: center;
    padding: 44px 16px;
    color: var(--read);
    font-size: 14px;
    line-height: 2;
}
.pending .big { font-family: var(--font-px); font-size: 44px; color: var(--primary-color); margin-bottom: 14px; letter-spacing: 2px; }

/* 출처/주의 문구. 예전 11px 은 도트 폰트에서 거의 안 읽혔다. */
.src_note {
    font-size: 13px;
    color: var(--dim);
    margin-top: 16px;
    line-height: 1.9;
    padding-top: 12px;
    border-top: 2px solid var(--line-soft);
}

/* 페이지 이동 */
.pager { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.pager a, .pager span {
    padding: 10px 18px;
    border: 2px solid var(--line);
    background: var(--panel-2);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    min-height: 46px;
    display: flex;
    align-items: center;
}
.pager a:hover { border-color: var(--accent-color); color: var(--accent-color); }
.pager span { color: #6a6a80; }

/* 빵부스러기 */
.crumb { font-size: 13px; color: var(--dim); margin-bottom: 16px; line-height: 1.8; }
.crumb a { color: var(--accent-color); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* 분석 구간 탭                                                        */
/* ------------------------------------------------------------------ */
.win_tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
/* 제목 옆에 붙을 때는 제목과 같은 줄에 앉는다. */
.panel_head .win_tabs { margin-bottom: 16px; }
.win_tabs a {
    padding: 7px 12px;
    font-size: 13px;
    text-decoration: none;
    background: var(--panel-2);
    border: 2px solid var(--line);
    color: var(--dim);
    transition: .12s;
}
.win_tabs a:hover { color: #fff; border-color: var(--accent-color); }
.win_tabs a.on { color: #111; background: var(--accent-color); border-color: #fff; font-weight: bold; }

/* 통계 패널을 두 칸으로 쪼갠다. 좁은 화면에서는 한 줄로 내려온다. */
.split2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin-top: 20px;
}

/* ------------------------------------------------------------------ */
/* 반응형                                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .lotto { padding: 20px 12px 72px; }
    .px_panel { padding: 18px; }
}

@media (max-width: 640px) {
    .lotto { --px: 3px; padding: 16px 10px 64px; }
    .px_panel { padding: 15px; margin-bottom: 18px; }
    .px_title { font-size: 16px; }
    .sub_title { font-size: 14px; }

    /* 국가 탭을 2줄로 */
    .country_tabs { grid-template-columns: repeat(2, 1fr); }

    .ball { --size: 46px; font-size: 20px; }
    .ball.lg { --size: 54px; font-size: 24px; }
    .ball.sm { --size: 40px; font-size: 19px; }
    .ball.xs { --size: 34px; font-size: 16px; }
    .balls { gap: 8px; }

    .latest_meta .no { font-size: 22px; }
    .stat_grid { grid-template-columns: 1fr 1fr; }
    .kv_grid { grid-template-columns: 1fr 1fr; }
    .kv .v { font-size: 21px; }

    .reco_item { padding: 13px; }
    .reco_head .tag { min-width: 0; width: 100%; }
    .reco_head .copy_btn { margin-left: 0; }
    .reco_head .span { flex: 1 1 100%; }

    .draw_row .no { min-width: 0; }
    .draw_row .date { min-width: 0; }
}

@media (max-width: 380px) {
    .stat_grid { grid-template-columns: 1fr; }
    .ball { --size: 42px; font-size: 18px; }
}

/* ------------------------------------------------------------------ */
/* 모션 최소화 설정                                                     */
/* 스캔라인과 깜빡임은 눈이 피로할 수 있어 끈다.                         */
/* GSAP 연출도 lotto.js 에서 같은 조건으로 건너뛴다.                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .lotto::before { display: none; }
    .blink { animation: none; }
    .copy_btn, .draw_row, .country_tabs a { transition: none; }
}