/* 배너 — 사이트 메인(index.css #v-index)과 동일한 디자인으로 통일(2026-09-14). --navy/--blue 변수는 index.css 전용(:root)이라 여기서는 안 먹어서 실제 값을 그대로 박아넣음. */ #v-lotto-index .lotto-notice-banner{ position:relative; display:block; text-decoration:none; overflow:hidden; background:#0f2744; border-radius:12px; border-left:4px solid #1d4ed8; box-shadow:0 4px 18px rgba(15,39,68,.18); transition:box-shadow .18s ease, border-color .18s ease; margin-bottom:16px; } #v-lotto-index .lotto-notice-banner:hover{ box-shadow:0 8px 28px rgba(15,39,68,.28); border-color:#60a5fa; } #v-lotto-index .lnb-inner{ display:flex; align-items:center; gap:14px; padding:14px 18px; } #v-lotto-index .lnb-icon{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; flex-shrink:0; font-size:1.15rem; background:rgba(29,78,216,.22); color:#93c5fd; } #v-lotto-index .lnb-text{ flex:1; min-width:0; } #v-lotto-index .lnb-title{ font-size:.95rem; font-weight:800; color:#fff; letter-spacing:.01em; } #v-lotto-index .lnb-desc{ font-size:.76rem; color:rgba(255,255,255,.45); margin-top:2px; } #v-lotto-index .lnb-go{ flex-shrink:0; display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:700; color:#93c5fd; white-space:nowrap; border:1px solid rgba(147,197,253,.3); border-radius:6px; padding:6px 14px; background:rgba(29,78,216,.2); transition:background .18s, color .18s; } #v-lotto-index .lnb-go i{ transition:transform .18s; } #v-lotto-index .lotto-notice-banner:hover .lnb-go{ background:#1d4ed8; color:#fff; border-color:#1d4ed8; } #v-lotto-index .lotto-notice-banner:hover .lnb-go i{ transform:translateX(3px); } @media(max-width:480px){ #v-lotto-index .lnb-desc{ display:none; } #v-lotto-index .lnb-inner{ padding:12px 14px; } } /** ** s/_e/menu **/ /*.lotto-menu{ display: flex; border-bottom:solid 1px #eee; margin:17px 0; overflow: hidden; } .lotto-menu .item{ width:100%; text-align:center; } .lotto-menu .item a{ width:100%; text-align:center; display:inline-block; padding:8px 0; background-color:#fff; font-size:16px;font-family: 'Noto Sans KR', sans-serif; font-weight:900; color:#333;} .lotto-menu .item.on a{ background-color:#060014; color:#fff;}*/ html#rws-html-id[data-proc="s"] .on-lotto-helper .jconfirm .jconfirm-box{ padding:1%; background:#fff; } html#rws-html-id[data-proc="s"] .on-lotto-helper .jconfirm .jconfirm-content{ padding:1%; background:#fff; } html#rws-html-id[data-proc="s"] .on-lotto-helper .jconfirm-content-pane{ margin:0;} html#rws-html-id[data-proc="s"] .on-lotto-helper .jconfirm-buttons{ float:none; width:100%; text-align:center; margin:10px 0; padding:0;} html#rws-html-id[data-proc="s"] .on-lotto-helper .jconfirm-buttons button{ width:130px; text-align:center; } /* 로또 자동추첨 고정/제외번호 저장·불러오기 다이얼로그(jquery-confirm 콘텐츠) — jquery-confirm은 모달을 body 최상위에 그려서 #v-lotto-s-auto의 자식이 아니므로 그 안의 CSS 변수(--sa-*)를 못 물려받음. 그래서 여기서는 같은 색을 그대로 하드코딩해서 톤만 맞춤. */ .sl-dialog{ text-align:left; } .sl-dialog-label{ display:block; font-size:12px; font-weight:700; color:#64748b; margin-bottom:6px; } .sl-dialog-limit{ font-weight:500; color:#94a3b8; } .sl-name-input{ width:100%; height:40px; padding:0 12px; box-sizing:border-box; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; font-weight:700; color:#0f172a; } .sl-name-input:focus{ outline:none; border-color:#0f2744; box-shadow:0 0 0 3px rgba(15,39,68,.1); } .sl-dialog-preview{ margin-top:10px; font-size:12px; color:#64748b; line-height:1.6; word-break:break-all; } .sl-list-dialog{ max-height:50vh; overflow-y:auto; text-align:left; } .sl-list-row{ display:flex; align-items:center; gap:8px; padding:10px 4px; border-bottom:1px solid #e2e8f0; } .sl-list-row:last-child{ border-bottom:none; } .sl-list-info{ flex:1; min-width:0; } .sl-list-name{ font-size:13px; font-weight:800; color:#0f172a; margin-bottom:3px; } .sl-list-nums{ font-size:12px; color:#64748b; word-break:break-all; } .sl-list-date{ display:inline-block; margin-left:6px; color:#94a3b8; } .sl-list-apply{ flex-shrink:0; font-size:12px; font-weight:700; color:#0f2744; background:#eff6ff; border:1px solid #bfdbfe; border-radius:6px; padding:7px 12px; cursor:pointer; } .sl-list-apply:hover{ background:#0f2744; color:#fff; border-color:#0f2744; } .sl-list-del{ flex-shrink:0; width:30px; height:30px; border-radius:6px; border:1px solid #e2e8f0; background:#fff; color:#94a3b8; cursor:pointer; } .sl-list-del:hover{ background:#fef2f2; color:#dc2626; border-color:#fecaca; } #store-mapview{ margin:10px 0;} #store-mapview .map{ width:100%; height:250px; margin:10px 0; border:solid 1px #eee;position: relative; overflow: hidden; } #store-mapview .map .search-empty{ text-align:center; display: flex; align-items:center; justify-content:center; width:100%; position: absolute; height:100%; } #store-mapview .map .search-empty .icon{font-size: 65px;text-align: center;width:100%;} #store-mapview .map .search-empty .msg{ color:#999; } .set-marker{ font-size:42px;margin-top: -15px; color:#f04} /** ** index **/ #v-lotto-index{ overflow: hidden;} #v-lotto-index .b1{ margin:80px; } /* SEO용 H1 — 바로 아래 배너와 동일한 카드 톤으로 배치(2026-09-22 재정리) */ #v-lotto-index .li-page-h1{ display:flex; align-items:flex-start; gap:8px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:10px 14px; margin:0 0 12px; box-shadow:0 2px 10px rgba(15,23,42,.05); } #v-lotto-index .li-page-h1 i{ color:#1d4ed8; font-size:12px; margin-top:2px; flex-shrink:0; } #v-lotto-index .li-page-h1 span{ font-size:12.5px; font-weight:700; color:#64748b; letter-spacing:-.01em; line-height:1.45; } #v-lotto-index .bor1{ border-bottom:solid 1px #333;} #v-lotto-index .section-1 .item-box{ display: flex; margin:10px 0;} #v-lotto-index .section-1 .item-box .item{ width:100%; text-align:center; padding: 0 1%;} #v-lotto-index .section-1 .item-box .item a{ line-height:54px; width:100%; color:#fff; font-family: 'Noto Sans KR', sans-serif; background-color:darkgray; border-radius:10px;} #v-lotto-index .t1{ font-size:26px; font-weight:900; text-align:center; } #v-lotto-index .t1 i{ color:#395 } #v-lotto-index .t1 i.slash:after{ content:"/" } #v-lotto-index .t2{ font-size:26px; font-weight:900; } #v-lotto-index .t3{ font-size:26px; font-weight:900; text-align:center; } #v-lotto-index .lotto-box{ overflow: hidden; position: relative; overflow: hidden; z-index: 1; margin-top:20px;} #v-lotto-index .lotto-box .box-item{ position: relative; overflow: hidden; } #v-lotto-index .lotto-box .box-item .title{ text-align:center; margin-bottom:30px;background:darkgray; padding:8px 0; color:#fff; border-radius:10px;} #v-lotto-index .lotto-box .box-item .title .no{ font-weight:900; font-size:15px;} #v-lotto-index .lotto-box .box-item .title .date{ color:#eee } #v-lotto-index .lotto-box .box-item .rst{ width:100%; max-width:560px; margin:0 auto; padding:0 1%;} #v-lotto-index .lotto-box .box-item .ad{ margin-top:30px; text-align:center; } #v-lotto-index .lotto-box .box-item .ad iframe{ display: inline-block; } #v-lotto-index .lotto-box .box-item .info{ padding:10px 1%; text-align:center; background:#fff; border-bottom:solid 2px darkgray;} #v-lotto-index .lotto-box .box-item .info .first{ font-weight:900; font-size:15px; } #v-lotto-index .lotto-box .box-item .info .allview{ margin:10px; text-align:center;} #v-lotto-index .lotto-box .box-item .info .allview a{ margin:0 4px; color:#333; } #v-lotto-index .lotto-all-menu{ margin:40px 0 60px 0; overflow: hidden; } #v-lotto-index .lotto-all-menu .list{ display: flex; text-align:center; overflow: hidden; } #v-lotto-index .lotto-all-menu .list .item{ border-right:solid 1px #eee; width:50%; } #v-lotto-index .lotto-all-menu .list .item:last-child{ border:none; } #v-lotto-index .lotto-all-menu .list .item dt{ font-size:16px; border-bottom:solid 1px #eee; padding:8px 0; } #v-lotto-index .lotto-all-menu .list .item dd{ padding:5px 0; } #v-lotto-index .lotto-all-menu .list .item dd a{ color:#333; } #v-lotto-index .lotto-all-menu .list .item dd .txt-icon{ font-family: 'Anton';color:blue; font-weight:900; margin-left:3px;} /*store*/ #v-lotto-index .shop-t1{ font-size:26px; font-weight:900; } #v-lotto-index .shop-t1 i{ color:#333; } #v-lotto-index .shop-box {margin-top:20px;} #v-lotto-index .shop-box .item-select{ font-weight:900; margin:10px 0; } #v-lotto-index .shop-box .item-select .txt{ background:#eee; padding:5px 15px; border-radius:0 10px 10px 0; color:#333; margin-right:8px; font-size:13px; } #v-lotto-index .shop-box .item-select .txt.on{ background:slategrey; color:#fff;} #v-lotto-index .shop-box .item-info{ margin-bottom:10px;; padding:7px 6px; background:#eee; border-radius:10px; font-weight:900; } #v-lotto-index .shop-box .list{ display: none;} #v-lotto-index .shop-box .list.on{ display: block;} #v-lotto-index .shop-box .list .item{ border-bottom:solid 1px #eee;text-align:center; position: relative; overflow: hidden;} #v-lotto-index .shop-box .list .item:first-child{ border-top:solid 1px #eee } #v-lotto-index .shop-box .list .item .no{ position: absolute; left:4px; top:3px; font-weight:900;} #v-lotto-index .shop-box .list .item .name{ text-align:center; margin:15px 0; font-weight:900;} #v-lotto-index .shop-box .list .item .gubun{ position: absolute; right:4px; top:3px; font-size:12px; padding:2px 4px;opacity: 0.6;} #v-lotto-index .shop-box .list .item .gubun.this-gubun-1{ color:#fff; background:red;} #v-lotto-index .shop-box .list .item .gubun.this-gubun-2{ color:#fff; background:blue;} #v-lotto-index .shop-box .list .item .addr{ margin:10px 0; line-height:21px; } #v-lotto-index .shop-box .list .item .addr a{ color:#999; } #v-lotto-index .shop-box .list .item.sub-ad{ padding:10px 0; } #v-lotto-index .shop-box .goto{ margin:8px; text-align:right; } #v-lotto-index .shop-box .goto a{ color:#333; font-weight:900;} /*mobile*/ @media screen and (max-width:512px){ #v-lotto-index .lotto-all-menu{ margin-top:10px; } #v-lotto-index .lotto-all-menu .list{ flex-wrap: wrap;} #v-lotto-index .lotto-all-menu .list .item{ border-right:solid 1px #eee; flex:1 1 50%; margin-top:30px;} } /** ** lotto/menu **/ #e-lotto-menu{ --lm-accent:#f04; --lm-ink:#1b1d21; --lm-muted:#6b7280; margin-bottom:22px; } #e-lotto-menu .navbar{ --bs-navbar-toggler-focus-width:0 !important; background:#fff; border:solid 1px #ececec; border-radius:16px; padding:8px 14px; box-shadow:0 2px 10px rgba(20,22,28,.04); } #e-lotto-menu .navbar .container-fluid{ padding:0; } #e-lotto-menu .navbar-brand{ display:inline-flex; align-items:center; gap:7px; font-weight:900; font-size:20px; letter-spacing:.04em; color:var(--lm-ink); padding:6px 12px; border-radius:12px; transition:color .15s ease, background .15s ease; } #e-lotto-menu .navbar-brand::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--lm-accent); box-shadow:0 0 0 4px rgba(255,0,68,.15); } #e-lotto-menu .navbar-brand:hover{ color:var(--lm-accent); } #e-lotto-menu .navbar-brand.on{ color:var(--lm-accent) !important; } #e-lotto-menu .navbar-nav{ gap:2px; align-items:center; } #e-lotto-menu .navbar .nav-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:15px; color:var(--lm-muted); padding:9px 14px !important; border-radius:10px; transition:color .15s ease, background .15s ease; } #e-lotto-menu .navbar .nav-link i{ font-size:14px; opacity:.85; } #e-lotto-menu .navbar .nav-link:hover{ color:var(--lm-ink); background:#f4f5f7; } #e-lotto-menu .navbar .nav-link.on{ color:var(--lm-accent) !important; background:rgba(255,0,68,.08); } #e-lotto-menu .navbar .nav-link.dropdown-toggle::after{ margin-left:4px; opacity:.5; transition:transform .15s ease; } #e-lotto-menu .navbar .nav-item.dropdown.show .nav-link.dropdown-toggle::after{ transform:rotate(180deg); } #e-lotto-menu .navbar .dropdown-menu{ margin-top:8px; padding:6px; border:solid 1px #eef0f2; border-radius:14px; box-shadow:0 12px 30px rgba(20,22,28,.12); min-width:180px; animation:lmFade .14s ease; } @keyframes lmFade{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } } #e-lotto-menu .navbar .dropdown-item{ font-size:14px; font-weight:600; color:#374151; padding:9px 12px; border-radius:9px; transition:color .12s ease, background .12s ease; } #e-lotto-menu .navbar .dropdown-item:hover{ background:#f4f5f7; color:var(--lm-ink); } #e-lotto-menu .navbar .dropdown-item.on{ color:var(--lm-accent); background:rgba(255,0,68,.07); font-weight:800; } #e-lotto-menu .navbar .navbar-toggler{ border:solid 1px #eee; background:#fff; border-radius:10px; padding:0; } #e-lotto-menu .navbar .navbar-toggler .icon{ display:inline-block; padding:7px 11px; color:var(--lm-ink); font-weight:900; } #e-lotto-menu .navbar .navbar-toggler[aria-expanded="true"]{ background:var(--lm-accent); border-color:var(--lm-accent); } #e-lotto-menu .navbar .navbar-toggler[aria-expanded="true"] .icon{ color:#fff; } /*mobile*/ @media screen and (max-width:991px){ #e-lotto-menu{ padding:0 12px; } #e-lotto-menu .navbar{ padding:8px 14px; } #e-lotto-menu .collapse.navbar-collapse{ margin-top:8px; } #e-lotto-menu .navbar-nav{ gap:2px; align-items:stretch; } #e-lotto-menu .navbar .nav-item{ border-top:solid 1px #f1f2f4; } #e-lotto-menu .navbar .nav-item:first-child{ border-top:none; } #e-lotto-menu .navbar .nav-link{ padding:12px 8px !important; font-size:16px; } #e-lotto-menu .navbar .dropdown-menu{ box-shadow:none; border:none; border-radius:0; margin:2px 0 6px; padding:0 0 0 10px; background:#fafbfc; animation:none; } #e-lotto-menu .navbar .dropdown-item{ padding:10px 12px; } #e-lotto-g-menu{ padding:0 12px; } } /** ** lotto/auto **/ .s-auto{ overflow: hidden; } .s-auto-popup-que{ margin:10px 1%; border-radius:10px; } .s-auto-popup-que .title{ font-weight:900; font-size:1.3em; font-family: 'Noto Sans KR', sans-serif; margin:9px 0; border-bottom:solid 1px #eee; padding-bottom:10px; color:#999; } .s-auto-popup-que .item{ padding:1%; overflow: auto; } .s-auto-popup-que .item dl{ margin: 10px 0; font-size:0.9em;padding:1%; } .s-auto-popup-que .item dl dt{ font-weight:900; } .s-auto-popup-que .item dl dt i{ color:#999; } .s-auto-popup-que .item dl dd{ margin:7px 9px; line-height:24px; font-family: 'Noto Sans KR', sans-serif; color:#999 } .s-auto-popup-que .item dl dd:before{content:" - "} .s-auto-popup-que .close{ margin:5px 0; text-align:center; } .s-auto-popup-que .close a{ background-color:#060014; border-radius:10px; width:120px; text-align:center; color:#fff; padding:5px 0; } .s-auto-lotto-result .c-lotto-box{ margin:8px 0; padding:5px 0; background-color:#fafafa; border-radius:10px; } #v-lotto-s-auto .helper{ text-align:right; } #v-lotto-s-auto .helper a{ font-size:13px; font-weight:900; color:#000; padding:5px 4px; text-decoration:none; } #v-lotto-s-auto [class^="item-table"]{ margin-bottom:15px; margin-top:10px; } #v-lotto-s-auto [class^="item-table"] .title{ font-size:20px; font-weight:900; border-radius:10px; padding:10px 9px; font-family: 'Noto Sans KR', sans-serif; color:#000;} #v-lotto-s-auto [class^="item-table"] .title .deco{ color:#999; font-weight:normal;} #v-lotto-s-auto [class^="item-table"] .option{ margin:8px 0; } #v-lotto-s-auto [class^="item-table"] .option label{ overflow: hidden; display: inline; } #v-lotto-s-auto [class^="item-table"] .option label input{ display: none} #v-lotto-s-auto [class^="item-table"] .option label input + .txt{ border:solid 1px #eee; padding:6px 0;text-align:center; margin:0 5px; display:inline-block; cursor: pointer; border-radius:50px; font-size:14px; font-weight:900;font-family: 'Noto Sans KR', sans-serif; } #v-lotto-s-auto [class^="item-table"] .option label input:checked + .txt{ background-color:#060014; color:#fff; border:solid 1px #fff;} #v-lotto-s-auto .item-table-count .option label input + .txt{ width:100px; max-width:35px; } #v-lotto-s-auto .item-table-mode .option label input + .txt{ width:100px; max-width:100px; } #v-lotto-s-auto [class^="item-table"] .option label input.disabled + .txt{ color:#ddd; } #v-lotto-s-auto .init-box{ clear: both; width:100%; overflow: hidden; text-align:center; } #v-lotto-s-auto .init-box a{ width:100%; max-width:100px; padding:4px; text-align:center; border:solid 1px #eee; color:#333; font-size:12px; } #v-lotto-s-auto .item-table-num .select{ display: flex; margin-top:10px; } #v-lotto-s-auto .item-table-num .select a.btn{ width:100%; margin:0 10px; padding:9px 0;text-align:center; display:inline-block; cursor: pointer; border-radius:50px; font-size:14px; font-weight:900;font-family: 'Noto Sans KR', sans-serif; color:#333; border:solid 1px #eee; line-height:21px; } #v-lotto-s-auto .item-table-num .select a.btn.on{ background-color:#060014; color:#fff; border:solid 1px #fff;} #v-lotto-s-auto .item-table-num .select .slt-count{ float:right; margin-right:12px; font-size:13px;line-height:21px; color:#fff; background-color:gray; padding:0 9px; border-radius:10px; } #v-lotto-s-auto .item-table-num .select a.btn.on .slt-count{color:#333; background-color:#fff; } #v-lotto-s-auto .item-table-num .select-list{ margin:10px 0; padding-top:10px; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(5, 50px); } #v-lotto-s-auto .item-table-num .select-list label{ width:100%;} #v-lotto-s-auto .item-table-num .select-list label input{ display: none} #v-lotto-s-auto .item-table-num .select-list label input + .txt{ border:solid 1px #eee; width:40px; height:40px; line-height:40px;text-align:center; margin:0 5px; display:inline-block; cursor: pointer; border-radius:50px; font-size:14px; font-weight:900;font-family: 'Noto Sans KR', sans-serif; } #v-lotto-s-auto .item-table-num .select-list label input + .txt{ background-color:#fff!important; color:#333 !important; } #v-lotto-s-auto .item-table-num .select-list label input:checked + .txt{ background-color:gray; color:#fff; border:solid 1px #fff;} #v-lotto-s-auto .item-table-num .select-list label input:checked + .txt.lotto-group-1{ background:#FFBF05 !important; color:#fff !important ; text-shadow: 0px 0px 1px rgba(73, 57, 0, .5);} #v-lotto-s-auto .item-table-num .select-list label input:checked + .txt.lotto-group-2{ background:#03F !important; color:#fff !important ; text-shadow: 0px 0px 1px rgba(0, 49, 70, .5);} #v-lotto-s-auto .item-table-num .select-list label input:checked + .txt.lotto-group-3{ background:#F00 !important; color:#fff !important ; text-shadow: 0px 0px 1px rgba(64, 0, 0, .5);} #v-lotto-s-auto .item-table-num .select-list label input:checked + .txt.lotto-group-4{ background:#333 !important; color:#fff !important ; text-shadow: 0px 0px 1px rgba(61, 61, 61, .5);} #v-lotto-s-auto .item-table-num .select-list label input:checked + .txt.lotto-group-5{ background:#01DF3A !important; color:#fff !important ; text-shadow: 0px 0px 1px rgba(41, 56, 0, .5);} #v-lotto-s-auto .submit{ margin:30px 0; text-align:center;} #v-lotto-s-auto .submit a.btn{ width:100%; max-width:240px; text-align:center; background-color:#060014; color:#fff; padding:15px 0; } #v-lotto-s-auto .clickmon-ad{ margin:50px 0; text-align:center; overflow: hidden; } /*mobile*/ @media screen and (max-width:680px){ #v-lotto-s-auto .item-table-num .select-list{ margin:10px 0; padding-top:10px; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 50px); } } /** ** s/result **/ #v-lotto-s-result{ overflow: hidden; padding:0 2%; } #v-lotto-s-result .c-search{ margin:12px 0; } #v-lotto-s-result .c-search .option-box{ text-align:center; margin:9px 0; } #v-lotto-s-result .c-search .option-box label{ overflow: hidden; display: inline; } #v-lotto-s-result .c-search .option-box label input{ display: none} #v-lotto-s-result .c-search .option-box label input + .txt{ border:solid 1px #eee; padding:9px 0;text-align:center; margin:0 5px; display:inline-block; cursor: pointer; border-radius:50px; font-size:14px; font-weight:900;font-family: 'Noto Sans KR', sans-serif; width:90px; } #v-lotto-s-result .c-search .option-box label input:checked + .txt{ background-color:gray; color:#fff; border:solid 1px #fff;} #v-lotto-s-result .c-search .search-box{ text-align:center; } #v-lotto-s-result .c-search .search-box input[type="search"]{ border:none; border-bottom:solid 1px #eee; outline:none; line-height:27px;} #v-lotto-s-result .c-search .search-box input[type="search"]:focus, #v-lotto-s-result .c-search .search-box input[type="search"].on{ border-bottom:solid 1px #060014; } #v-lotto-s-result .c-search .search-box a.btn{ color:#060014;line-height:27px; } #v-lotto-s-result .c-search .reset-box{ margin:9px 0; text-align:center; } #v-lotto-s-result .c-search .reset-box a.btn{ color:#999; font-size:13px; } #v-lotto-s-result .c-list{ margin-top:30px; } #v-lotto-s-result .c-list .item{ margin:30px 0; background-color:#fafafa; border-radius:15px; } #v-lotto-s-result .c-list .item .top{ padding:15px 0; text-align:center; } #v-lotto-s-result .c-list .item .top .no{ font-size:19px; font-weight:900;font-family: 'Noto Sans KR', sans-serif; } #v-lotto-s-result .c-list .item .top .date{ margin:5px 0; font-size:14px; color:#999; } #v-lotto-s-result .c-list .item .number{ padding:14px 2%; background-color:#fff; } #v-lotto-s-result .c-list .item .detail-title{ text-align:center; } #v-lotto-s-result .c-list .item .detail-title a{ color:#333; padding:10px 0; font-size:15px; font-family: 'Noto Sans KR', sans-serif; font-weight:900; } #v-lotto-s-result .c-list .item .detail-view{ overflow: hidden; display: none;} #v-lotto-s-result .c-list .item.detail-on .detail-view{ display: block; } #v-lotto-s-result .c-list .item .detail-title a i.on-up{ display: none; } #v-lotto-s-result .c-list .item.detail-on .detail-title a i.on-up{ display: inline-block; } #v-lotto-s-result .c-list .item.detail-on .detail-title a i.on-down{ display: none; } #v-lotto-s-result .c-list .item .detail-view .detail-item{ background-color:#fff; margin: 10px 2%; padding:1%; border-radius:10px; } #v-lotto-s-result .c-list .item .detail-view .detail-item dl{ clear:both; padding:1% 0; font-size:13px; overflow: hidden;} #v-lotto-s-result .c-list .item .detail-view .detail-item dl dt{ float: left; font-weight:900; margin-right:8px;} #v-lotto-s-result .c-list .item .detail-view .detail-item dl dd{ float: left;} #v-lotto-s-result .c-list .item .site-view{ background-color:#fff; overflow: hidden; border-top:solid 1px #eee; text-align:center; padding:15px 0; } #v-lotto-s-result .c-list .item .site-view a{ color:#333; font-size:13px; margin:0 8px; } /** ** s/result SEO (s2) **/ #v-lotto-s2-result, #v-lotto-s2-my{ overflow:hidden; margin-bottom:60px; padding:0 2%; box-sizing:border-box; } #v-lotto-s2-result .bc, #v-lotto-s2-my .bc{ font-size:13px; color:#c7cad0; margin:14px 0 10px; line-height:2; } #v-lotto-s2-result .bc a, #v-lotto-s2-my .bc a{ display:inline-block; padding:4px 9px; border-radius:20px; color:#f04; font-weight:800; text-decoration:none; transition:background .12s ease; } #v-lotto-s2-result .bc a:hover, #v-lotto-s2-result .bc a:active, #v-lotto-s2-my .bc a:hover, #v-lotto-s2-my .bc a:active{ background:rgba(255,0,68,.1); } #v-lotto-s2-result .bc strong, #v-lotto-s2-my .bc strong{ display:inline-block; padding:0 2px; color:#666; font-weight:700; } #v-lotto-s2-result h1.tit, #v-lotto-s2-my h1.tit{ font-size:21px; font-weight:900; font-family:'Noto Sans KR',sans-serif; margin:6px 0; } #v-lotto-s2-result .lead, #v-lotto-s2-my .lead{ color:#888; font-size:13px; line-height:21px; margin:0 0 14px; } #v-lotto-s2-result .s2-search{ background:#fafbfc; border:solid 1px #e8ecf1; border-radius:12px; padding:14px; margin-bottom:14px; } #v-lotto-s2-result .s2-search-opt{ display:flex; justify-content:center; gap:8px; margin-bottom:10px; } #v-lotto-s2-result .s2-search-opt label input{ display:none; } #v-lotto-s2-result .s2-search-opt label span{ display:inline-block; padding:7px 16px; border-radius:50px; border:solid 1px #dde3ea; font-size:13px; font-weight:800; cursor:pointer; background:#fff; } #v-lotto-s2-result .s2-search-opt label input:checked + span{ background:#2d4a6f; color:#fff; border-color:#2d4a6f; } #v-lotto-s2-result .s2-search-row{ display:flex; align-items:center; justify-content:center; gap:8px; } #v-lotto-s2-result .s2-search-row input[type="search"]{ border:none; border-bottom:solid 2px #e0e4ea; padding:8px 4px; font-size:16px; font-weight:700; width:120px; text-align:center; outline:none; background:transparent; } #v-lotto-s2-result .s2-search-row input:focus{ border-color:#2d4a6f; } #v-lotto-s2-result .s2-search-row .btn-search{ border:none; background:transparent; color:#2d4a6f; font-size:18px; cursor:pointer; padding:4px 8px; } #v-lotto-s2-result .s2-search-reset{ text-align:center; margin-top:10px; } #v-lotto-s2-result .s2-search-reset a{ font-size:12px; color:#999; } #v-lotto-s2-result .s2-list{ display:flex; flex-direction:column; gap:12px; } #v-lotto-s2-result .s2-card{ background:#fafafa; border:solid 1px #eee; border-radius:14px; padding:16px; } #v-lotto-s2-result .s2-card-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; } #v-lotto-s2-result .s2-round{ font-size:18px; font-weight:900; color:#2d4a6f; text-decoration:none; } #v-lotto-s2-result .s2-date{ font-size:12px; color:#999; } #v-lotto-s2-result .s2-card-balls{ margin:8px 0; } #v-lotto-s2-result .s2-summary{ font-size:13px; color:#a9760a; font-weight:700; margin:6px 0 10px; } #v-lotto-s2-result .s2-card-links{ display:flex; flex-wrap:wrap; gap:8px; } #v-lotto-s2-result .s2-card-links a{ font-size:12px; padding:6px 12px; border-radius:50px; border:solid 1px #dde3ea; text-decoration:none; color:#555; background:#fff; } #v-lotto-s2-result .s2-card-links a.primary{ background:#2d4a6f; color:#fff; border-color:#2d4a6f; } #v-lotto-s2-result .s2-balls, #v-lotto-s2-my .s2-balls{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; justify-content:center; } #v-lotto-s2-result .s2-balls .ball, #v-lotto-s2-my .s2-balls .ball{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; color:#fff; font-size:13px; font-weight:900; } #v-lotto-s2-result .s2-balls .ball.g1, #v-lotto-s2-my .s2-balls .ball.g1{ background:#FFBF05; color:#333; } #v-lotto-s2-result .s2-balls .ball.g2, #v-lotto-s2-my .s2-balls .ball.g2{ background:#03F; } #v-lotto-s2-result .s2-balls .ball.g3, #v-lotto-s2-my .s2-balls .ball.g3{ background:#F00; } #v-lotto-s2-result .s2-balls .ball.g4, #v-lotto-s2-my .s2-balls .ball.g4{ background:#333; } #v-lotto-s2-result .s2-balls .ball.g5, #v-lotto-s2-my .s2-balls .ball.g5{ background:#01DF3A; color:#333; } #v-lotto-s2-result .s2-balls .plus, #v-lotto-s2-my .s2-balls .plus{ color:#bbb; margin:0 2px; font-size:12px; } #v-lotto-s2-result .s2-empty, #v-lotto-s2-my .s2-empty{ text-align:center; padding:30px; color:#999; } #v-lotto-s2-result .s2-empty .icon, #v-lotto-s2-my .s2-empty .icon{ font-size:36px; margin-bottom:8px; } #v-lotto-s2-result .s2-detail-head{ text-align:center; padding:18px; background:#fafafa; border-radius:14px; margin:12px 0; } #v-lotto-s2-result .s2-round-badge{ display:inline-block; font-size:12px; font-weight:800; background:#2d4a6f; color:#fff; padding:4px 12px; border-radius:50px; margin-bottom:10px; } #v-lotto-s2-result .s2-predraw-head{ text-align:center; padding:24px 18px; background:#fafbfc; border:dashed 2px #dde3ea; border-radius:14px; margin:12px 0 20px; } #v-lotto-s2-result .s2-round-badge-wait{ background:#8a93a3; } #v-lotto-s2-result .s2-balls-wait .ball-wait{ background:#e4e8ee; color:#aab2c0; } #v-lotto-s2-result .s2-predraw-note{ font-size:12px; color:#999; margin:12px 0 0; } #v-lotto-s2-result .s2-prize-table{ overflow-x:auto; margin:16px 0; } #v-lotto-s2-result .s2-prize-table table{ width:100%; border-collapse:collapse; font-size:14px; } #v-lotto-s2-result .s2-prize-table th{ background:#f4f6f9; padding:10px 8px; text-align:left; font-size:12px; font-weight:800; border-bottom:solid 2px #e8ecf1; } #v-lotto-s2-result .s2-prize-table td{ padding:12px 8px; border-bottom:solid 1px #f0f0f0; } #v-lotto-s2-result .s2-prize-table td.em{ font-weight:900; color:#c45c00; } #v-lotto-s2-result .s2-prize-table .rk{ font-weight:800; } #v-lotto-s2-result .s2-analysis{ margin:16px 0; } #v-lotto-s2-result .s2-analysis-tit{ font-size:15px; font-weight:900; margin:0 0 10px; color:#333; } #v-lotto-s2-result .s2-analysis-tit i{ color:#2d4a6f; margin-right:4px; } #v-lotto-s2-result .s2-analysis-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } #v-lotto-s2-result .s2-analysis-item{ background:#fafbfc; border:solid 1px #e8ecf1; border-radius:10px; padding:12px 8px; text-align:center; } #v-lotto-s2-result .s2-analysis-item .lbl{ font-size:11px; color:#999; font-weight:700; margin-bottom:4px; } #v-lotto-s2-result .s2-analysis-item .val{ font-size:18px; font-weight:900; color:#2d4a6f; } #v-lotto-s2-result .s2-analysis-item .val-sm{ font-size:13px; font-weight:800; } #v-lotto-s2-result .s2-analysis-item .sub{ font-size:11px; color:#a9760a; font-weight:700; margin-top:3px; } #v-lotto-s2-result .s2-analysis-wide{ grid-column:1 / -1; } #v-lotto-s2-result .s2-detail-nav{ display:flex; justify-content:space-between; align-items:center; margin:20px 0; gap:8px; } #v-lotto-s2-result .s2-detail-nav a{ font-size:13px; font-weight:800; color:#2d4a6f; text-decoration:none; padding:8px 12px; border:solid 1px #dde3ea; border-radius:8px; background:#fff; } #v-lotto-s2-result .s2-detail-nav a.mid{ color:#666; } #v-lotto-s2-result .s2-detail-nav .disabled{ flex:1; } #v-lotto-s2-result .s2-related, #v-lotto-s2-my .s2-related{ display:flex; flex-direction:column; gap:8px; margin-bottom:24px; } #v-lotto-s2-result .s2-related a, #v-lotto-s2-my .s2-related a{ display:block; padding:12px 14px; border:solid 1px #eee; border-radius:10px; text-decoration:none; color:#444; font-size:13px; font-weight:700; background:#fafafa; } #v-lotto-s2-result .s2-related a i, #v-lotto-s2-my .s2-related a i{ color:#999; margin-right:6px; width:16px; text-align:center; } /* lotto/s/my.php — 내 번호 보관함 (2026-10-06 신규) */ #v-lotto-s2-my .myp-login-promo{ text-align:center; padding:40px 20px; background:#fafbfc; border:dashed 2px #dde3ea; border-radius:14px; margin:16px 0; } #v-lotto-s2-my .myp-login-promo i{ font-size:32px; color:#2d4a6f; margin-bottom:12px; } #v-lotto-s2-my .myp-login-promo p{ font-size:14px; color:#555; font-weight:700; line-height:1.6; margin:10px 0 16px; } #v-lotto-s2-my .btn-signin{ display:inline-block; background:#2d4a6f; color:#fff; font-size:13px; font-weight:800; padding:10px 22px; border-radius:50px; text-decoration:none; } #v-lotto-s2-my .myp-sub-tit{ font-size:15px; font-weight:900; margin:18px 0 10px; color:#333; display:flex; align-items:center; gap:6px; } #v-lotto-s2-my .myp-sub-tit i{ color:#2d4a6f; } #v-lotto-s2-my .myp-count{ margin-left:auto; font-size:12px; font-weight:800; color:#999; background:#f4f6f9; padding:3px 10px; border-radius:50px; } #v-lotto-s2-my .myp-add-card{ background:#fafbfc; border:solid 1px #e8ecf1; border-radius:14px; padding:14px; margin-bottom:18px; } #v-lotto-s2-my .myp-grid{ display:grid; grid-template-columns:repeat(9,1fr); gap:8px 0; margin:10px 0; } #v-lotto-s2-my .myp-grid label{ width:100%; display:flex; justify-content:center; } #v-lotto-s2-my .myp-grid label input{ display:none; } /* 선택 전부터 번호그룹 색으로 실제 로또볼처럼 표시 — 선택여부는 색이 아니라 체크뱃지+링으로 구분 */ #v-lotto-s2-my .myp-grid label input + .txt{ position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; width:30px; height:30px; border-radius:50%; color:#fff; font-size:12px; font-weight:900; cursor:pointer; box-shadow:inset 0 -2px 2px rgba(0,0,0,.15); transition:transform .1s ease; } #v-lotto-s2-my .myp-grid label input + .txt.lotto-group-1{ background:#FFBF05; color:#5a4200; } #v-lotto-s2-my .myp-grid label input + .txt.lotto-group-2{ background:#03F; } #v-lotto-s2-my .myp-grid label input + .txt.lotto-group-3{ background:#F00; } #v-lotto-s2-my .myp-grid label input + .txt.lotto-group-4{ background:#333; } #v-lotto-s2-my .myp-grid label input + .txt.lotto-group-5{ background:#01DF3A; color:#1a4d0a; } #v-lotto-s2-my .myp-grid label input:checked + .txt{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #2d4a6f, inset 0 -2px 2px rgba(0,0,0,.15); transform:scale(1.15); } #v-lotto-s2-my .myp-grid label input:checked + .txt::after{ content:'✓'; position:absolute; top:-5px; right:-5px; width:14px; height:14px; line-height:13px; text-align:center; font-size:9px; font-weight:900; color:#fff; background:#2d4a6f; border-radius:50%; border:2px solid #fff; } #v-lotto-s2-my .myp-grid label input:disabled:not(:checked) + .txt{ opacity:.3; cursor:not-allowed; } #v-lotto-s2-my .myp-add-row{ display:flex; gap:8px; margin-top:10px; } #v-lotto-s2-my .myp-add-row input[type="text"]{ flex:1; min-width:0; border:solid 1px #dde3ea; border-radius:8px; padding:9px 12px; font-size:13px; } #v-lotto-s2-my .btn-myp-save{ background:#2d4a6f; color:#fff; border:none; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap; } #v-lotto-s2-my .btn-myp-save:disabled{ background:#ccc; cursor:not-allowed; } #v-lotto-s2-my .myp-list{ margin-bottom:10px; } #v-lotto-s2-my .myp-row{ background:#fafafa; border:solid 1px #eee; border-radius:12px; padding:12px 14px; margin-bottom:10px; } #v-lotto-s2-my .myp-row-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; } #v-lotto-s2-my .myp-round{ font-size:13px; font-weight:900; color:#2d4a6f; } #v-lotto-s2-my .myp-name{ font-size:12px; color:#999; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #v-lotto-s2-my .myp-del{ border:none; background:transparent; color:#ccc; cursor:pointer; font-size:13px; padding:4px; } #v-lotto-s2-my .myp-del:hover{ color:#f04; } #v-lotto-s2-my .myp-row-body{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; } #v-lotto-s2-my .myp-badge{ font-size:11px; font-weight:800; padding:5px 10px; border-radius:50px; white-space:nowrap; } #v-lotto-s2-my .myp-badge-wait{ background:#eef1f5; color:#8a93a3; } #v-lotto-s2-my .myp-badge-lose{ background:#f4f6f9; color:#999; } #v-lotto-s2-my .myp-badge-win{ background:#fff3e0; color:#c45c00; } @media (max-width:600px){ #v-lotto-s2-result .s2-card-links a{ font-size:11px; padding:5px 10px; } #v-lotto-s2-result .s2-prize-table{ font-size:12px; } #v-lotto-s2-result .s2-analysis-grid{ grid-template-columns:repeat(2,1fr); } } /** ** s/status **/ #v-lotto-s-status{overflow: hidden; padding:0 2%; margin-bottom:64px;} #v-lotto-s-status .bc{ font-size:13px; color:#c7cad0; margin:14px 0 0; line-height:2; } #v-lotto-s-status .notice{ padding:1%; background-color:#fafafa; border-radius:20px; } #v-lotto-s-status .notice .title{ font-size:18px; font-family: 'Noto Sans KR', sans-serif; margin:10px 0; } #v-lotto-s-status .notice .title i{ color:cadetblue; } #v-lotto-s-status .notice ul{ margin-left:9px; } #v-lotto-s-status .notice ul li{ margin:5px 0; line-height:21px; font-size:14px; } #v-lotto-s-status .sub-menu{ margin:10px 0 ; } #v-lotto-s-status .sub-menu .search-box dl{ text-align:center; } #v-lotto-s-status .sub-menu .search-box dl dt{background-color:#fafafa; border-radius:14px; padding:10px 0; font-weight:900;font-family: 'Noto Sans KR', sans-serif; } #v-lotto-s-status .sub-menu .search-box dl dd{ padding:13px 0; display: flex;} #v-lotto-s-status .sub-menu .search-box dl label{ overflow: hidden; display: inline;max-width:90px; width:100%; margin:0 5px; border:solid 1px #eee;border-radius:50px; } #v-lotto-s-status .sub-menu .search-box dl label input{ display: none} #v-lotto-s-status .sub-menu .search-box dl label input + .txt{ padding:9px 0;text-align:center;display:inline-block; cursor: pointer; font-size:14px; font-weight:900;font-family: 'Noto Sans KR', sans-serif; width:100%;} #v-lotto-s-status .sub-menu .search-box dl label input:checked + .txt{ background-color:gray; color:#fff;} #v-lotto-s-status .sub-menu .submit{ margin:10px 0; text-align:center; } #v-lotto-s-status .sub-menu .submit a{ } #v-lotto-s-status .c-list{ margin:20px 0; } #v-lotto-s-status .c-list .item{display: flex; margin:10px 0;} #v-lotto-s-status .c-list .item .lotto-ball{ line-height:27px;max-width:30px; font-size:13px; text-align:center;font-family: 'Noto Sans KR', sans-serif; margin:0 10px; } #v-lotto-s-status .c-list .item .progress-set{ width:100%; line-height:27px; } #v-lotto-s-status .c-list .item .progress-set progress{ width:100%; -webkit-appearance: none; border-radius:0 10px 0 10px;} #v-lotto-s-status .c-list .item .progress-set progress::-webkit-progress-bar { background-color: #999; border-radius:0 10px 10px 0;} #v-lotto-s-status .c-list .item .progress-set progress::-webkit-progress-value {background-color: #bcbd22; border-radius:0 10px 10px 0;} #v-lotto-s-status .c-list .item .progress-set.lotto-sub-group-1 progress::-webkit-progress-value{ background:#FFBF05 !important;} #v-lotto-s-status .c-list .item .progress-set.lotto-sub-group-2 progress::-webkit-progress-value{ background:#03F !important;} #v-lotto-s-status .c-list .item .progress-set.lotto-sub-group-3 progress::-webkit-progress-value{ background:#F00 !important;} #v-lotto-s-status .c-list .item .progress-set.lotto-sub-group-4 progress::-webkit-progress-value{ background:#333 !important;} #v-lotto-s-status .c-list .item .progress-set.lotto-sub-group-5 progress::-webkit-progress-value{ background:#01DF3A !important;} #v-lotto-s-status .c-list .item .count{ line-height:27px;width:100%; max-width:90px; text-align:center;font-family: 'Noto Sans KR', sans-serif; text-align:center; font-size:13px; } #v-lotto-s-status .c-list .item .detail{ line-height:27px;width:100%; max-width:45px; font-size:13px; background:red;color:#fff; text-align:center; opacity: 0.6; border-radius:10px;} /** ** s/attend — 번호 참여 투표 **/ #v-lotto-s-attend{ overflow:hidden; margin-bottom:60px; padding:0 2%; box-sizing:border-box; } #v-lotto-s-attend .bc{ font-size:13px; color:#c7cad0; margin:14px 0 0; line-height:2; } #v-lotto-s-attend .lat-hero{ display:flex; flex-wrap:wrap; gap:16px; align-items:stretch; justify-content:space-between; padding:20px 18px; margin:16px 0 12px; background:linear-gradient(135deg,#1a2744 0%,#2d4a6f 55%,#3d6b9e 100%); border-radius:16px; color:#fff; } #v-lotto-s-attend .lat-badge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; padding:4px 10px; border-radius:50px; background:rgba(255,255,255,.15); margin-bottom:8px; } #v-lotto-s-attend .lat-tit{ font-size:22px; font-weight:900; font-family:'Noto Sans KR',sans-serif; margin:0 0 8px; line-height:1.3; } #v-lotto-s-attend .lat-lead{ font-size:13px; line-height:20px; color:rgba(255,255,255,.82); margin:0 0 10px; max-width:420px; } #v-lotto-s-attend .lat-dday{ font-size:12px; color:#ffd89b; margin:0; font-weight:600; } #v-lotto-s-attend .lat-dday.closed{ color:#ffb4b4; } #v-lotto-s-attend .lat-dday i{ margin-right:4px; } #v-lotto-s-attend .lat-stats{ display:flex; gap:8px; align-self:center; } #v-lotto-s-attend .lat-stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:72px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.1); border:solid 1px rgba(255,255,255,.12); } #v-lotto-s-attend .lat-stat.accent{ background:rgba(255,200,80,.18); border-color:rgba(255,200,80,.35); } #v-lotto-s-attend .lat-stat .n{ font-size:22px; font-weight:900; font-family:'Noto Sans KR',sans-serif; line-height:1; } #v-lotto-s-attend .lat-stat .l{ font-size:10px; color:rgba(255,255,255,.7); margin-top:4px; font-weight:600; } #v-lotto-s-attend .lat-notice{ display:flex; align-items:center; gap:8px; padding:10px 14px; margin-bottom:12px; background:#fff8e6; border:solid 1px #ffe4a8; border-radius:10px; font-size:13px; color:#7a5c00; } #v-lotto-s-attend .lat-notice i{ color:#e3a008; flex-shrink:0; } #v-lotto-s-attend .lat-filter{ margin-bottom:14px; } #v-lotto-s-attend .lat-filter-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; } #v-lotto-s-attend .lat-field label{ display:block; font-size:11px; font-weight:700; color:#888; margin-bottom:5px; } #v-lotto-s-attend .lat-field select{ border:solid 1px #dde3ea; border-radius:8px; padding:8px 12px; font-size:14px; font-weight:700; min-width:160px; background:#fff; } #v-lotto-s-attend .lat-tabs{ display:flex; gap:6px; } #v-lotto-s-attend .lat-tab{ margin:0; cursor:pointer; } #v-lotto-s-attend .lat-tab input{ display:none; } #v-lotto-s-attend .lat-tab span{ display:inline-block; padding:8px 16px; border-radius:50px; font-size:13px; font-weight:800; border:solid 1px #dde3ea; background:#fff; color:#666; transition:all .15s; } #v-lotto-s-attend .lat-tab input:checked + span{ background:#2d4a6f; color:#fff; border-color:#2d4a6f; } #v-lotto-s-attend .lat-crowd{ padding:14px 16px; margin-bottom:12px; background:linear-gradient(90deg,#fff5f0,#fff); border:solid 1px #ffe0d0; border-radius:12px; } #v-lotto-s-attend .lat-crowd-hd{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; } #v-lotto-s-attend .lat-crowd-hd .tit{ font-size:14px; font-weight:900; color:#333; } #v-lotto-s-attend .lat-crowd-hd .tit i{ color:#ff6b35; margin-right:4px; } #v-lotto-s-attend .lat-crowd-hd .sub{ font-size:11px; color:#999; } #v-lotto-s-attend .lat-crowd-balls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } #v-lotto-s-attend .lat-mypick{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 14px; margin-bottom:14px; border:solid 1px #e8ecf1; border-radius:12px; background:#fafbfc; } #v-lotto-s-attend .lat-mypick.has{ border-color:#c5daf5; background:#f0f6ff; } #v-lotto-s-attend .lat-mypick .lbl{ font-size:12px; font-weight:800; color:#555; white-space:nowrap; } #v-lotto-s-attend .lat-mypick .lbl i{ color:#e25555; margin-right:3px; } #v-lotto-s-attend .lat-mypick-balls{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; flex:1; } #v-lotto-s-attend .lat-mypick .empty{ font-size:13px; color:#999; } #v-lotto-s-attend .lat-mini{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; color:#fff; font-size:13px; font-weight:900; font-family:'Noto Sans KR',sans-serif; } #v-lotto-s-attend .lat-mini.g1{ background:#FFBF05; color:#333; } #v-lotto-s-attend .lat-mini.g2{ background:#03F; } #v-lotto-s-attend .lat-mini.g3{ background:#F00; } #v-lotto-s-attend .lat-mini.g4{ background:#333; } #v-lotto-s-attend .lat-mini.g5{ background:#01DF3A; color:#333; } #v-lotto-s-attend .lat-hot{ margin:16px 0; } #v-lotto-s-attend .lat-hot > .tit{ display:block; font-size:14px; font-weight:900; margin-bottom:10px; color:#333; } #v-lotto-s-attend .lat-hot > .tit i{ color:#ff6b35; margin-right:4px; } #v-lotto-s-attend .lat-hot-list{ display:flex; flex-direction:column; gap:6px; } #v-lotto-s-attend .lat-hot-item{ display:flex; align-items:center; gap:8px; padding:6px 0; } #v-lotto-s-attend .lat-hot-item .rank{ width:20px; font-size:12px; font-weight:900; color:#999; text-align:center; } #v-lotto-s-attend .lat-hot-item .bar-wrap{ flex:1; height:6px; background:#eef1f5; border-radius:3px; overflow:hidden; } #v-lotto-s-attend .lat-hot-item .bar{ height:100%; background:linear-gradient(90deg,#ff9a56,#ff6b35); border-radius:3px; transition:width .3s; } #v-lotto-s-attend .lat-hot-item .cnt{ font-size:12px; font-weight:700; color:#888; min-width:36px; text-align:right; } #v-lotto-s-attend .lat-empty-hot{ text-align:center; padding:20px; margin:14px 0; background:#fafafa; border-radius:12px; border:dashed 1px #ddd; color:#888; font-size:13px; } #v-lotto-s-attend .lat-empty-hot i{ font-size:28px; margin-bottom:8px; color:#ccc; display:block; } #v-lotto-s-attend .lat-grid-hd{ display:flex; align-items:baseline; gap:8px; margin:18px 0 10px; border-bottom:solid 1px #eee; padding-bottom:8px; } #v-lotto-s-attend .lat-grid-hd .tit{ font-size:15px; font-weight:900; color:#333; } #v-lotto-s-attend .lat-grid-hd .sub{ font-size:11px; color:#999; } #v-lotto-s-attend .lat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:8px; margin-bottom:24px; } #v-lotto-s-attend .lat-ball{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:1; border:none; border-radius:14px; cursor:pointer; background:#f4f6f9; overflow:hidden; transition:transform .12s, box-shadow .12s; font-family:'Noto Sans KR',sans-serif; padding:0; } #v-lotto-s-attend .lat-ball:not(.disabled):hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.1); } #v-lotto-s-attend .lat-ball.pulse{ animation:latPulse .4s ease; } @keyframes latPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} } #v-lotto-s-attend .lat-ball .num{ font-size:17px; font-weight:900; z-index:2; line-height:1; } #v-lotto-s-attend .lat-ball .votes{ font-size:9px; font-weight:700; color:#888; z-index:2; margin-top:2px; } #v-lotto-s-attend .lat-ball .heat{ position:absolute; bottom:0; left:0; right:0; height:var(--p,0); background:rgba(45,74,111,.12); z-index:1; transition:height .3s; } #v-lotto-s-attend .lat-ball .check{ position:absolute; top:4px; right:4px; width:16px; height:16px; background:#2d4a6f; color:#fff; border-radius:50%; font-size:8px; display:flex; align-items:center; justify-content:center; z-index:3; } #v-lotto-s-attend .lat-ball.g1 .num{ color:#b8860b; } #v-lotto-s-attend .lat-ball.g2 .num{ color:#03F; } #v-lotto-s-attend .lat-ball.g3 .num{ color:#F00; } #v-lotto-s-attend .lat-ball.g4 .num{ color:#333; } #v-lotto-s-attend .lat-ball.g5 .num{ color:#0a8f2e; } #v-lotto-s-attend .lat-ball.on{ box-shadow:0 0 0 2px #2d4a6f, 0 4px 12px rgba(45,74,111,.2); background:#eef4ff; } #v-lotto-s-attend .lat-ball.disabled{ cursor:not-allowed; opacity:.65; } #v-lotto-s-attend .lat-grid-empty{ grid-column:1/-1; text-align:center; padding:30px; color:#999; } #v-lotto-s-attend .lat-grid-empty i{ font-size:36px; display:block; margin-bottom:8px; } .lat-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); background:#2d4a6f; color:#fff; padding:12px 22px; border-radius:50px; font-size:14px; font-weight:700; z-index:9999; opacity:0; transition:transform .25s, opacity .25s; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.2); } .lat-toast.show{ transform:translateX(-50%) translateY(0); opacity:1; } @media (max-width:600px){ #v-lotto-s-attend .lat-hero{ flex-direction:column; } #v-lotto-s-attend .lat-stats{ width:100%; justify-content:space-between; } #v-lotto-s-attend .lat-stat{ flex:1; min-width:0; padding:10px 6px; } #v-lotto-s-attend .lat-tit{ font-size:19px; } #v-lotto-s-attend .lat-grid{ grid-template-columns:repeat(5,1fr); gap:6px; } } /* lotto-status-detail */ .detail-item-box{ overflow: hidden; } .detail-item-box .item dt{ font-weight:900; border:solid 1px #eee; padding: 5px; margin:10px 0; } .detail-item-box .item dd{ background-color: #fafafa; padding:5px 0; margin:5px 0; font-size:12px; } /** ** w/store **/ /*wls/store*/ #v-lotto-w-store{ overflow: hidden; margin-bottom:60px;} #v-lotto-w-store .title{ border-bottom:solid 1px #eee; margin-top:20px; font-weight:900; padding:4px 1%; } #v-lotto-w-store .form{ margin-top:20px; border-bottom:solid 4px slategrey; } #v-lotto-w-store .form dl dt{ font-size:13px; padding:10px 1%; background-color:slategrey; color:#fff; border-radius:0 15px 15px 0; } #v-lotto-w-store .form dl dd{ width:100%; margin:10px 0; } #v-lotto-w-store .form dl dd select{ width:100%; max-width:280px;} #v-lotto-w-store .selection { width:100%; height: 35px;;} #v-lotto-w-store .select2-container .select2-selection--single{ height: 35px; padding-top:2px;} #v-lotto-w-store .select2-container--default .select2-selection--single .select2-selection__arrow{ top:4px;} #v-lotto-w-store .list-title{ font-weight:900; margin-top:30px; margin-bottom:10px; } #v-lotto-w-store .list-title .txt{ background:#eee; padding:5px 15px; border-radius:0 10px 10px 0; color:#333; margin-right:8px; font-size:13px; } #v-lotto-w-store .list-title .txt.on{ background:slategrey; color:#fff;} #v-lotto-w-store .list-item .item-none{ margin:10px 0;text-align:center;color:#999; } #v-lotto-w-store .list-item .item-none .icon{ font-size:45px; margin:15px 0; } #v-lotto-w-store .list-item .item-none .msg{ font-size:13px; } #v-lotto-w-store .list-item{ display: none; } #v-lotto-w-store .list-item.on{ display: block;} #v-lotto-w-store .list-item .item{ border-bottom:solid 1px #eee;text-align:center; position: relative; overflow: hidden;} #v-lotto-w-store .list-item .item:first-child{ border-top:solid 1px #eee } #v-lotto-w-store .list-item .item .no{ position: absolute; left:4px; top:3px; font-weight:900;} #v-lotto-w-store .list-item .item .name{ text-align:center; margin:15px 0; font-weight:900;} #v-lotto-w-store .list-item .item .gubun{ position: absolute; right:4px; top:3px; font-size:12px; padding:2px 4px;opacity: 0.6;} #v-lotto-w-store .list-item .item .gubun.this-gubun-1{ color:#fff; background:red;} #v-lotto-w-store .list-item .item .gubun.this-gubun-2{ color:#fff; background:blue;} #v-lotto-w-store .list-item .item .addr{ margin:10px 0; line-height:21px; } #v-lotto-w-store .list-item .item .addr a{ color:#999; } #v-lotto-w-store .list-item .item.sub-ad{ padding:10px 0; } #v-lotto-w-store .ad{ margin:10px 0; } /** ** w/status — 당첨판매점 통계 (지도 + 순위) **/ #v-lotto-w-status{ overflow:hidden; margin-bottom:60px; padding:0 2%; box-sizing:border-box; } #v-lotto-w-status .bc{ font-size:13px; color:#c7cad0; margin:14px 0 0; line-height:2; } #v-lotto-w-status .wst-tit{ font-size:21px; font-weight:900; font-family:'Noto Sans KR',sans-serif; margin:18px 0 6px; } #v-lotto-w-status .wst-tit i{ color:#6b7c93; margin-right:6px; } #v-lotto-w-status .wst-lead{ color:#888; font-size:13px; line-height:21px; margin:0 0 12px; } #v-lotto-w-status .wst-subtit{ font-size:17px; font-weight:900; font-family:'Noto Sans KR',sans-serif; margin:24px 0 12px; border-bottom:solid 1px #eee; padding-bottom:7px; } #v-lotto-w-status .wst-subtit .cnt{ font-size:13px; font-weight:500; color:#999; margin-left:6px; } #v-lotto-w-status .wst-filter{ background:#fafafa; border:solid 1px #eee; border-radius:12px; padding:14px 16px; margin:10px 0 16px; } #v-lotto-w-status .wst-filter-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } #v-lotto-w-status .wst-field label{ display:block; font-size:12px; font-weight:700; color:#666; margin-bottom:6px; } #v-lotto-w-status .wst-field .select2-container{ width:100% !important; max-width:100%; } #v-lotto-w-status .select2-container .select2-selection--single{ height:38px; padding-top:4px; border-radius:8px; border-color:#ddd; } #v-lotto-w-status .select2-container--default .select2-selection--single .select2-selection__arrow{ top:6px; } #v-lotto-w-status .wst-map-panel{ background:linear-gradient(180deg,#f8fafc 0%,#fff 100%); border:solid 1px #e8ecf1; border-radius:14px; padding:14px; margin:0 0 16px; } #v-lotto-w-status .wst-summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; } #v-lotto-w-status .wst-sum-box{ display:flex; flex-direction:column; align-items:center; padding:12px 6px; background:#fff; border-radius:10px; border:solid 1px #eef1f5; } #v-lotto-w-status .wst-sum-box .num{ font-size:22px; font-weight:900; color:#2d4a6f; font-family:'Noto Sans KR',sans-serif; line-height:1.1; } #v-lotto-w-status .wst-sum-box .lbl{ font-size:11px; color:#999; margin-top:4px; } #v-lotto-w-status .wst-map{ width:100%; height:340px; border-radius:12px; border:solid 1px #e0e4ea; overflow:hidden; background:#e9eef3; } #v-lotto-w-status .wst-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } #v-lotto-w-status .wst-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:solid 1px #dde3ea; border-radius:50px; background:#fff; cursor:pointer; font-size:12px; transition:border-color .15s, box-shadow .15s; } #v-lotto-w-status .wst-chip:hover{ border-color:#6b8cae; box-shadow:0 2px 8px rgba(45,74,111,.08); } #v-lotto-w-status .wst-chip.on{ border-color:#2d5bb8; background:#eef4ff; } #v-lotto-w-status .wst-chip .cn{ color:#555; font-weight:600; } #v-lotto-w-status .wst-chip .cw{ color:#a9760a; font-weight:900; } #v-lotto-w-status .wst-chip[data-heat]{ background:linear-gradient(90deg, rgba(255,233,199,calc(var(--heat)/120)) 0%, #fff 100%); } #v-lotto-w-status .wst-chip-empty{ font-size:13px; color:#999; padding:8px 0; } .wst-pin{ display:flex; flex-direction:column; align-items:center; min-width:52px; padding:6px 10px 8px; border-radius:10px; background:#fff; border:solid 2px #c5d4e8; box-shadow:0 4px 14px rgba(30,50,80,.15); cursor:pointer; transform:translate(-50%,-100%); transition:transform .12s, box-shadow .12s; } .wst-pin:hover{ transform:translate(-50%,-102%); box-shadow:0 6px 18px rgba(30,50,80,.22); } .wst-pin.on{ border-color:#2d5bb8; background:#eef4ff; } .wst-pin[data-heat]{ border-color:hsl(210,calc(40% + var(--heat)/3),calc(72% - var(--heat)/5)); } .wst-pin .sn{ font-size:11px; font-weight:700; color:#555; white-space:nowrap; } .wst-pin .sc{ font-size:16px; font-weight:900; color:#c45c00; line-height:1.1; font-family:'Noto Sans KR',sans-serif; } .wst-pin .ss{ font-size:9px; color:#999; font-weight:600; } #v-lotto-w-status .wst-list.on{ display:block; } #v-lotto-w-status .wst-empty{ margin:20px 0; text-align:center; color:#999; } #v-lotto-w-status .wst-empty .icon{ font-size:45px; margin:12px 0; } #v-lotto-w-status .wst-empty .msg{ font-size:13px; } #v-lotto-w-status .wst-row{ display:flex; gap:12px; padding:14px 10px; border-bottom:solid 1px #eee; align-items:flex-start; } #v-lotto-w-status .wst-row:first-child{ border-top:solid 1px #eee; } #v-lotto-w-status .wst-row .wrank{ flex:0 0 28px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:#6b7c93; background:#f0f3f7; border-radius:8px; margin-top:2px; } #v-lotto-w-status .wst-row .wbody{ flex:1; min-width:0; } #v-lotto-w-status .wst-row .wname{ display:block; font-weight:900; font-size:15px; color:#222; text-decoration:none; margin-bottom:6px; } #v-lotto-w-status .wst-row .wname i{ color:#999; margin-right:4px; font-size:13px; } #v-lotto-w-status .wst-row .wname:hover{ color:#2d5bb8; } #v-lotto-w-status .wst-row .wstats{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; } #v-lotto-w-status .wst-row .badge-tot{ font-size:11px; padding:2px 8px; border-radius:10px; background:#f0f3f7; color:#555; font-weight:700; } #v-lotto-w-status .wst-row .badge1{ font-size:11px; padding:2px 8px; border-radius:10px; background:#ffe9c7; color:#a9760a; font-weight:700; } #v-lotto-w-status .wst-row .badge2{ font-size:11px; padding:2px 8px; border-radius:10px; background:#e0ecff; color:#2d5bb8; font-weight:700; } #v-lotto-w-status .wst-row .waddr{ display:block; font-size:12px; color:#999; text-decoration:none; line-height:18px; } #v-lotto-w-status .wst-row .waddr:hover{ color:#666; } @media (max-width:768px){ #v-lotto-w-status .wst-filter-grid{ grid-template-columns:1fr; } #v-lotto-w-status .wst-summary{ grid-template-columns:repeat(2,1fr); } #v-lotto-w-status .wst-map{ height:280px; } } /* ============================================================ lotto/w/online.php — 온라인(인터넷) 당첨 비중 추이 (2026-10-06 신규) ============================================================ */ #v-lotto-w-online{ overflow:hidden; margin-bottom:60px; padding:0 2%; box-sizing:border-box; } #v-lotto-w-online .bc{ font-size:13px; color:#c7cad0; margin:14px 0 0; line-height:2; } #v-lotto-w-online .wol-tit{ font-size:21px; font-weight:900; font-family:'Noto Sans KR',sans-serif; margin:18px 0 6px; } #v-lotto-w-online .wol-tit i{ color:#6b7c93; margin-right:6px; } #v-lotto-w-online .wol-lead{ color:#888; font-size:13px; line-height:21px; margin:0 0 12px; } #v-lotto-w-online .wol-sub-tit{ font-size:16px; font-weight:900; margin:26px 0 12px; } #v-lotto-w-online .wol-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; } #v-lotto-w-online .wol-stat{ background:#fafafa; border:solid 1px #eee; border-radius:12px; padding:14px 10px; text-align:center; } #v-lotto-w-online .wol-stat-lbl{ font-size:11px; color:#999; margin-bottom:6px; } #v-lotto-w-online .wol-stat-val{ font-size:21px; font-weight:900; color:#333; font-family:'Noto Sans KR',sans-serif; } #v-lotto-w-online .wol-stat-cmp-val{ font-size:15px; display:flex; align-items:center; justify-content:center; gap:6px; } #v-lotto-w-online .wol-stat-cmp-val i{ font-size:11px; color:#bbb; } #v-lotto-w-online .wol-after{ color:#2d5bb8; } #v-lotto-w-online .wol-chart-wrap{ background:#fafafa; border:solid 1px #eee; border-radius:12px; padding:18px 14px 10px; } #v-lotto-w-online .wol-chart{ display:flex; align-items:flex-end; gap:3px; height:150px; border-bottom:solid 1px #ddd; padding-bottom:20px; position:relative; } #v-lotto-w-online .wol-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative; min-width:4px; } #v-lotto-w-online .wol-bar{ width:100%; background:linear-gradient(180deg,#9fc2ff,#4a9eff); border-radius:3px 3px 0 0; min-height:2px; } #v-lotto-w-online .wol-bar.wol-bar-mobile{ background:linear-gradient(180deg,#8fe0b0,#2fb871); } #v-lotto-w-online .wol-bar-lbl{ position:absolute; bottom:-18px; font-size:9px; color:#aaa; white-space:nowrap; } #v-lotto-w-online .wol-chart-legend{ font-size:11px; color:#999; margin-top:10px; display:flex; align-items:center; gap:6px; } #v-lotto-w-online .wol-dot{ display:inline-block; width:9px; height:9px; border-radius:3px; background:linear-gradient(180deg,#8fe0b0,#2fb871); } #v-lotto-w-online .wol-table-wrap{ overflow-x:auto; border:solid 1px #eee; border-radius:12px; } #v-lotto-w-online .wol-table{ width:100%; min-width:520px; border-collapse:collapse; font-size:12.5px; } #v-lotto-w-online .wol-table th{ background:#fafafa; color:#999; font-weight:700; font-size:11px; padding:10px 8px; text-align:center; border-bottom:solid 1px #eee; white-space:nowrap; } #v-lotto-w-online .wol-table td{ padding:9px 8px; text-align:center; border-bottom:solid 1px #f3f3f3; white-space:nowrap; } #v-lotto-w-online .wol-table tr:last-child td{ border-bottom:none; } #v-lotto-w-online .wol-table .wol-pct{ font-weight:800; color:#2d5bb8; } #v-lotto-w-online .wol-table tr.wol-row-mobile{ background:#f4fbf7; } #v-lotto-w-online .wol-table a{ color:#333; text-decoration:none; font-weight:700; } #v-lotto-w-online .wol-table a:hover{ color:#2d5bb8; } #v-lotto-w-online .wol-faq{ margin:28px 0 0; } #v-lotto-w-online .wol-faq-item{ border:solid 1px #eee; border-radius:10px; padding:12px 14px; margin-bottom:8px; } #v-lotto-w-online .wol-faq-item summary{ font-size:13px; font-weight:700; cursor:pointer; } #v-lotto-w-online .wol-faq-item p{ margin:8px 0 0; font-size:13px; color:#777; line-height:1.6; } #v-lotto-w-online .wol-note{ font-size:11.5px; color:#aaa; margin-top:16px; line-height:1.6; } @media (max-width:640px){ #v-lotto-w-online .wol-stats{ grid-template-columns:repeat(2,1fr); } } #store-mapview{ margin:10px 0;} #store-mapview .map{ width:100%; height:250px; margin:10px 0; border:solid 1px #eee;position: relative; overflow: hidden; } #store-mapview .map .search-empty{ text-align:center; display: flex; align-items:center; justify-content:center; width:100%; position: absolute; height:100%; } #store-mapview .map .search-empty .icon{font-size: 65px;text-align: center;width:100%;} #store-mapview .map .search-empty .msg{ color:#999; } .set-marker{ font-size:42px;margin-top: -15px; color:#f04} /** ** g/_e/menu **/ #e-lotto-g-menu{ margin-bottom:0; } #e-lotto-g-menu .menu{ margin:0; text-align:center; } #e-lotto-g-menu .menu a{ margin:0 5px; color:#333; padding:12px 0; } #e-lotto-g-menu .menu a.on{ font-weight:900; } /** ** lab **/ [id^="v-lotto-lab-research"]{} [id^="v-lotto-lab-research"] .btn-box{ margin-bottom:14px; text-align:right; } [id^="v-lotto-lab-research"] .menu{ margin-bottom:20px; } [id^="v-lotto-lab-research"] .ad{ min-height:auto;} [id^="v-lotto-lab-research"] .abs-alert{ position: absolute; } [id^="v-lotto-lab-research"] .empty{ text-align:center; margin-top:20px; } [id^="v-lotto-lab-research"] .empty .icon{ font-size:70px; color:#333; } [id^="v-lotto-lab"] .nickname{ margin:4px 9px; } /*page*/ [id^="v-lotto-lab"] .page{ text-align: center; position: relative; margin-top:20px; } [id^="v-lotto-lab"] .page a{ color:#555; font-size: 1.3em; margin:0 8px; font-family: 'Anton', sans-serif; text-decoration:none;margin-bottom:30px; } [id^="v-lotto-lab"] .page a.this-pagebtn.on{ color:#f00; } [id^="v-lotto-lab"] .page a.this-first,[id^="v-lotto-lab"] .page a.this-last{ color:#eee; } [id^="v-lotto-lab"] .page a.this-first.more,[id^="v-lotto-lab"] .page a.this-last.more{ color:#000; } #v-lotto-lab-research .lab-list{ margin-top:20px; } #v-lotto-lab-research .menu a.on{ } #v-lotto-lab-research .lab-list .list .card{ margin-bottom:20px; position: relative; } #v-lotto-lab-research .lab-list .list .card a.link-full{ position: absolute; width:100%; height:100%; left:0;right:0;bottom:0;top:0;z-index: 10;} #v-lotto-lab-research-set .this-pack .spc td{ vertical-align:middle; } #v-lotto-lab-research-set .this-pack .updown i.fa-angle-down{ display: none; } #v-lotto-lab-research-set .this-pack .updown.on i.fa-angle-down{ display: inline; } #v-lotto-lab-research-set .this-pack .updown.on i.fa-angle-up{ display: none; } #v-lotto-lab-research-set .btn-box{ margin-bottom:90px; } /*#v-lotto-lab-rlog .cts .card .card-header .nav-link*/ #v-lotto-lab-rlog-info .cts .item-set[data-role="pack"]{ padding:5px 1em;} #v-lotto-lab-rlog-info .cts table td,#v-lotto-lab-rlog-info .cts table th{ text-align:center;} [id^="v-lotto-lab-rlog-"] .nav .nav-item a{ position: relative; } .s-sl-nocheck{ margin:3px 0; } #v-lotto-lab-rlog-rating .cts .item-set .card-text [type="range"]{ position: relative; } #v-lotto-lab-rlog-rating .cts .item-set .card-text .progress-stacked{ height:40px; } #v-lotto-lab-rlog-rating .cts .item-set .card-text .progress{ height:40px; position: relative; overflow: hidden;--bs-progress-border-radius: 0;--bs-progress-font-size: 0.95rem;} #v-lotto-lab-rlog-rating .cts .item-set .card-text .progress .progress-bar{ background-color:#dee2e6; color:#333; font-weight:900; } #v-lotto-lab-rlog-rating .cts .item-set .card-text .progress.on .progress-bar{ background-color:#dc3545; color:#fff; } #v-lotto-lab-rlog-rating .cts .item-set .card-text .progress a.score-cursor{ position: absolute; width:100%; height:100%; left:0;right:0;bottom:0;top:0;z-index: 10; border-radius:0; } #v-lotto-lab-rlog-rating .cts .item-set .card-text .progress .progress-bar{border-radius:0 !important;} /** ** g **/ /*common game*/ [id^="v-lotto-g-"]{ margin-bottom:64px; margin-top:50px;} [id^="v-lotto-g-"] .notice{ overflow: hidden; } [id^="v-lotto-g-"] .notice .section-title{ font-size:16px;padding:15px 1%; text-align:center; cursor: pointer; background:darkgray; color:#fff;font-family: sans-serif; font-weight:600;border-radius:10px 10px 0 0;} [id^="v-lotto-g-"] .notice .section-title i{margin:0 5px; } [id^="v-lotto-g-"] .notice .section-title i.off{ display: none;} [id^="v-lotto-g-"] .notice .section-title.on i.on{ display: none;} [id^="v-lotto-g-"] .notice .section-title.on i.off{ display: inline-block;;} [id^="v-lotto-g-"] .notice .section-view{ padding:10px 0; display: none;overflow-y:auto; max-height:200px;} [id^="v-lotto-g-"] .notice .section-view dl{ margin:10px 0;} [id^="v-lotto-g-"] .notice .section-view dt{ margin:3px 0; } [id^="v-lotto-g-"] .notice .section-view dd{ padding:5px 0; margin-left:15px; overflow: hidden;} [id^="v-lotto-g-"] .notice .section-view dd.number{ margin-left:15px; line-height:26px; } [id^="v-lotto-g-"] .notice .section-view dd:before{ content:"⊙ "; } [id^="v-lotto-g-"] .myrp{ overflow: hidden; } [id^="v-lotto-g-"] .myrp dl{ float: right; } [id^="v-lotto-g-"] .myrp dt{ font-size: 13px; padding:4px 0; color:#333; font-weight:900; text-align:center;} [id^="v-lotto-g-"] .myrp dd{ font-size: 13px; margin-bottom:10px; color:#999;} [id^="v-lotto-g-"] .game{ border:solid 1px #eee; padding:0 1%; border-radius:0 0 9px 9px; } [id^="v-lotto-g-"] .game dl{ margin:10px 0; width:50%; float:left; text-align:center;} [id^="v-lotto-g-"] .game dl.full{ width:100%; float: none; clear: both; text-align:left; } [id^="v-lotto-g-"] .game dl.full.single{ text-align:center; } [id^="v-lotto-g-"] .game dl dt{ margin:5px 0; font-size:18px;} [id^="v-lotto-g-"] .game dl dd.rp{ color:red; opacity: 0.6; } [id^="v-lotto-g-"] .game dl dd.num{ border-top:solid 1px #eee; margin-top:20px;} [id^="v-lotto-g-"] .empty{ text-align:center; color:#999; } [id^="v-lotto-g-"] .empty .icon{ font-size:70px; } [id^="v-lotto-g-"] .empty .msg{ font-size:14px; } [id^="v-lotto-g-"] .game .select-list{ margin:10px 0; padding-top:10px; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(5, 50px); } [id^="v-lotto-g-"] .game .select-list label{ width:100%;} [id^="v-lotto-g-"] .game .select-list label input{ display: none} [id^="v-lotto-g-"] .game .select-list label input + .txt{ border:solid 1px #eee; width:40px; height:40px; line-height:40px;text-align:center; margin:0 5px; display:inline-block; cursor: pointer; border-radius:50px; font-size:14px; font-weight:900;font-family: 'Noto Sans KR', sans-serif; } [id^="v-lotto-g-"] .game .select-list label input + .txt{ background-color:#fff!important; color:#333 !important; } [id^="v-lotto-g-"] .game .select-list label input:checked + .txt{ background-color:gray; color:#fff; border:solid 1px #fff;} [id^="v-lotto-g-"] .game .select-list label input:checked + .txt.lotto-group-1{ background:#FFBF05 !important; color:#fff !important ; text-shadow: 0px 0px 1px rgba(73, 57, 0, .5);} [id^="v-lotto-g-"] .game .select-list label input:checked + .txt.lotto-group-2{ background:#03F !important; color:#fff !important ; text-shadow: 0px 0px 1px rgba(0, 49, 70, .5);} [id^="v-lotto-g-"] .game .select-list label input:checked + .txt.lotto-group-3{ background:#F00 !important; color:#fff !important ; text-shadow: 0px 0px 1px rgba(64, 0, 0, .5);} [id^="v-lotto-g-"] .game .select-list label input:checked + .txt.lotto-group-4{ background:#333 !important; color:#fff !important ; text-shadow: 0px 0px 1px rgba(61, 61, 61, .5);} [id^="v-lotto-g-"] .game .select-list label input:checked + .txt.lotto-group-5{ background:#01DF3A !important; color:#fff !important ; text-shadow: 0px 0px 1px rgba(41, 56, 0, .5);} [id^="v-lotto-g-"] .game .select-list label input[disabled] + .txt{ background:#eee !important; color:#999 !important; border:solid 1px #eee !important; } [id^="v-lotto-g-"] .game dd.wran{ margin:30px 0;border:solid 1px #eee; border-radius:10px; color:#999; padding:30px 0; text-align:center; line-height:26px;} [id^="v-lotto-g-"] .game dd.buy-btn{ text-align:center; padding:10px 0; } [id^="v-lotto-g-"] .game dd.buy-btn a{ background-color:#999; border-radius:10px;width:100%; max-width:240px; text-align:center; padding:10px 0; color:#fff; cursor: unset;} [id^="v-lotto-g-"] .game dd.buy-btn a:after{ content:"번호를 선택해 주세요"; } [id^="v-lotto-g-"] .game dd.buy-btn a.on{ background-color:#060014; color:#fff; cursor: pointer; } [id^="v-lotto-g-"] .game dd.buy-btn a.on:after{ content:"구매하기"; } [id^="v-lotto-g-"] .game dd.game-btn{ text-align:center; padding:10px 0; margin:20px 0; } [id^="v-lotto-g-"] .game dd.game-btn a{ background-color:#060014; color:#fff; cursor: pointer;border-radius:10px;width:100%; max-width:240px; text-align:center; padding:10px 0;} [id^="v-lotto-g-"] .game dd.game-btn a.gray{background-color:gray; } [id^="v-lotto-g-"]{ overflow: hidden;} [id^="v-lotto-g-"] .total-info{ margin:0 0 10px 0; overflow: hidden;border:solid 1px #eee;} [id^="v-lotto-g-"] .total-info .title{ font-size:18px; font-weight:900; background:#eee; text-align:center;padding:10px 0; } [id^="v-lotto-g-"] .total-info .info{ overflow: hidden; padding:5px 2%;} [id^="v-lotto-g-"] .total-info .info dl{ margin:8px 0; } [id^="v-lotto-g-"] .total-info .info dd{ margin-left:15px;} [id^="v-lotto-g-"] .search{ overflow: hidden;} [id^="v-lotto-g-"] .search select{ border:solid 1px slategrey; padding:9px 0; text-align:center; width:100%; max-width:110px; } [id^="v-lotto-g-"] .list{ overflow: hidden;} [id^="v-lotto-g-"] .list ul{ margin:0 auto; width:100%; overflow: hidden; } [id^="v-lotto-g-"] .list ul li{ text-align:center; color:#fff; margin:10px 0 25px 0; opacity: 0.6; overflow: hidden; border:solid 1px slategrey; border-left:none; border-right:none;} [id^="v-lotto-g-"] .list ul li .no{ padding-top:10px; font-size:16px; font-weight:900; background:slategrey;} [id^="v-lotto-g-"] .list ul li .dt{color:#fff; padding-bottom:10px; background:slategrey;} [id^="v-lotto-g-"] .list ul li .db{ width:100%; overflow: hidden; } [id^="v-lotto-g-"] .list ul li .db dl{ width:100%; max-width:150px; margin:0 auto;} [id^="v-lotto-g-"] .list ul li .db dt{ width:48%; float:left;font-weight:900; color:#333; margin:0 1% 8px 1%;background:darkslategrey; padding:4px 0; color:#fff; font-size:11px; font-weight:normal; border-radius:0 0 10px 10px;} [id^="v-lotto-g-"] .list ul li .db dd{ width:48%; float:left; margin:0 0 8px 0;overflow: hidden; } /*[id^="v-lotto-g-"] .list ul li .db{ margin:10px 0; } [id^="v-lotto-g-"] .list ul li .db dt{ color:#333; border:solid 1px slategrey; border-left:none;border-right:none; background-color:slategrey; }*/ [id^="v-lotto-g-"] .list ul li .num{ background:#fff; padding:10px 0;} [id^="v-lotto-g-"] .list ul li .price{ background:#fff; overflow: hidden; padding:10px 0;} [id^="v-lotto-g-"] .list ul li .price .sum{ font-weight:900; text-align:center; font-size:16px;} [id^="v-lotto-g-"] .list ul li .price .sum.this-win{ color:#00f;} [id^="v-lotto-g-"] .list ul li .price .sum.this-lose{ color:#F00;} [id^="v-lotto-g-"] .list ul li .price .sum.this-ready{ color:#999;} [id^="v-lotto-g-"] .list ul li .info{ background:#fff; color:#333; text-align:left;border-top:solid 1px slategrey; border-bottom:solid 1px slategrey ;padding:10px 5px; overflow: hidden;} [id^="v-lotto-g-"] .list ul li .info dl{ margin:5px 0; overflow: hidden;} [id^="v-lotto-g-"] .list ul li .info dl dd{ margin-left:15px; } [id^="v-lotto-g-"] .list ul li .info dl dd.win-num .c-lotto .ball{ line-height:25px; width:25px; text-align:center; border-radius:25px; margin-right:4px;} [id^="v-lotto-g-"] .list ul li .c-lotto-box{ max-width:180px; margin:0 auto;} [id^="v-lotto-g-"] .list ul li .c-lotto-box .lotto-group-ready{ background-color:silver; border:solid 1px silver} [id^="v-lotto-g-"] .list ul li.this-ready .info{ text-align:center; border-bottom:none; } [id^="v-lotto-g-"] .list ul li.this-ready .info .icon{ font-size:2.5em; } /*common page*/ [id^="v-lotto-g-"] .page{ text-align: center; position: relative; margin-top:20px; } [id^="v-lotto-g-"] .page a{ color:#555; font-size: 1.3em; margin:0 8px; font-family: 'Anton', sans-serif; text-decoration:none;margin-bottom:30px; } [id^="v-lotto-g-"] .page a.this-pagebtn.on{ color:#f00; } [id^="v-lotto-g-"] .page a.this-first,[id^="v-lotto-g-"] .page a.this-last{ color:#eee; } [id^="v-lotto-g-"] .page a.this-first.more{ color:#000; } /*common alt*/ .c-g-lotto-alt-box{ padding:5px; text-align:center;} .c-g-lotto-alt-box .title{ font-weight:900; font-size:21px; margin:10px 0;} .c-g-lotto-alt-box .msg{ border:solid 1px #eee; border-radius:10px; padding:10px 5px; margin:15px 0; } .c-g-lotto-alt-box .msg.lose{ color:#999; } .c-g-lotto-alt-box .msg.win{ color:#00f; } .c-g-lotto-alt-box .c-lotto .ball{ border:solid 1px #eee; border-radius:50px; line-height:32px; width:32px; display: inline-block; text-align:center; } /*mobile*/ @media screen and (max-width:680px){ [id^="v-g-"] .game .select-list{ grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(8, 50px); } [id^="v-g-"] .game dd.game-btn a{ max-width:110px; } } #v-lotto-a-hope{ overflow: hidden; } #v-lotto-a-hope .bc{ font-size:13px; color:#94a3b8; margin:14px 0 10px; line-height:2; } #v-lotto-a-hope .notice{ margin:30px 0 10px 0; border:solid 1px lightslategray; background-color:lightslategray; border-radius:10px; position: relative; padding:9px 0;} #v-lotto-a-hope .notice .bg{ background-image:url('/public/images/etc/hope-100.png'); position: absolute; width:100%;height:100%; left:0; right:0;top:0;bottom:0; opacity: 0.3; z-index: 9;background-repeat: no-repeat;background-size: cover;} #v-lotto-a-hope .notice p{ margin:3px 0; padding:0 1%; line-height:24px; color:#fff; position: relative; z-index: 10; } #v-lotto-a-hope .signin-box{ margin:10px 0; border-radius:10px; border:solid 1px #eee; padding:40px 0; text-align:center;} #v-lotto-a-hope .signin-box a{ background:red; opacity: 0.6; border-radius:10px; padding:5px 10px; color:#fff; font-size:13px;} #v-lotto-a-hope .msg-form{ overflow: hidden; } #v-lotto-a-hope .msg-form .icon-box{ font-size:14px; margin:8px 0; font-weight:900; color:lightslategray; opacity: 0.7; } #v-lotto-a-hope .msg-form textarea{ width:100%; height:80px; resize:none; outline:none; padding:4px 3px; border:solid 1px #eee;} #v-lotto-a-hope .msg-form textarea:focus{ } #v-lotto-a-hope .msg-form .check-box{ overflow: hidden;} #v-lotto-a-hope .msg-form .check-box .txt{ font-weight:normal; font-size:16px; color:#999; cursor: pointer;} #v-lotto-a-hope .msg-form .check-box .txt i.on{ display: none;} #v-lotto-a-hope .msg-form .check-box input{ display: none;} #v-lotto-a-hope .msg-form .check-box input:checked + .txt{color:#000; } #v-lotto-a-hope .msg-form .check-box input:checked + .txt i.on{display: inline-block;} #v-lotto-a-hope .msg-form .check-box input:checked + .txt i.off{display: none; } #v-lotto-a-hope .msg-form .btn-box{ overflow: hidden;} #v-lotto-a-hope .msg-form .btn-box a{ margin:5px 0; padding:5px 4px; width:100%; text-align:center; background-color:lightslategray; color:#fff; } #v-lotto-a-hope .list{ margin:30px 0 10px 0; border-top:double 4px #999; padding-top:10px; overflow: hidden; } #v-lotto-a-hope .list .item{ position: relative; margin-bottom:20px; border-radius:10px; overflow: hidden;} #v-lotto-a-hope .list .item a.full-btn{ position: absolute; right:0; top:0; z-index: 11; color:#fff;padding:10px 1%; font-size:18px; } #v-lotto-a-hope .list .item .content{ position: relative; z-index: 10; } #v-lotto-a-hope .list .item .content .info{ padding:10px 1%; font-size:14px; background-color:darkgray; color:#fff;} #v-lotto-a-hope .list .item .content .msg{ background:#fff; padding:0 2%; line-height:23px; margin:10px 0; font-family: 'Noto Sans KR', sans-serif; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; overflow: hidden; } #v-lotto-a-hope .list .item.more-on .content .msg{ display: block; } #v-lotto-a-hope .list .item .content .btn-more{ display: none;padding:0 2%; margin-bottom:10px;} #v-lotto-a-hope .list .item.more .content .btn-more{ display: block;} #v-lotto-a-hope .list .item.more .content .btn-more a{ text-decoration:underline; color:#999;} #v-lotto-a-hope .list .item.more .content .btn-more a.off{ display: none; } #v-lotto-a-hope .list .item.more-on .content .btn-more a.on{ display: none; } #v-lotto-a-hope .list .item.more-on .content .btn-more a.off{ display:inline-block ; } #v-lotto-a-hope .list .item .content .msg-fake{ position: absolute; z-index: 0; opacity: 0;} #v-lotto-a-hope .list .item .content .rp{ background-color:#fafafa; padding:8px 1%; color:blue; opacity: 0.6;} #v-lotto-a-hope .list .item .date{ margin:5px 0; color:#999; text-align:right; } #v-lotto-a-hope .list .item.off .rp{ color:red;} #v-lotto-a-hope .list .item.this-delete{ opacity: 0.4;} #v-lotto-a-hope .list .item.this-delete .msg{ color:#999;} /*common page*/ [id^="v-lotto-hope"] .page{ text-align: center; position: relative; margin-top:20px; } [id^="v-lotto-hope"] .page a{ color:#555; font-size: 1.3em; margin:0 8px; font-family: 'Anton', sans-serif; text-decoration:none;margin-bottom:30px; } [id^="v-lotto-hope"] .page a.this-pagebtn.on{ color:#f00; } [id^="v-lotto-hope"] .page a.this-first,[id^="v-lotto-hope"] .page a.this-last{ color:#eee; } [id^="v-lotto-hope"] .page a.this-first.more,#v-post-index .page a.this-last.more{ color:#000; } /*mobile*/ @media screen and (max-width:680px){ #v-lotto-a-hope .notice .bg{background-size: 100% 100%; } } /* ** a/premium */ #v-lotto-a-premium{ overflow: hidden; } #v-lotto-a-premium .title{ background-color:#369; opacity: 0.6; text-align:center; font-weight:900; font-size:17px; padding:10px 0; color:#fff; border-radius:10px 10px 0 0 ;} #v-lotto-a-premium .notice{ padding:10px 1%; border-bottom:solid 1px #eee;} #v-lotto-a-premium .notice ul li{ margin:4px 0; line-height:21px; } #v-lotto-a-premium .pre-box{ margin-top:20px; border} #v-lotto-a-premium .pre-box dl{ margin:20px 0; overflow: hidden; } #v-lotto-a-premium .pre-box dl dt{ font-size:20px;} #v-lotto-a-premium .pre-box dl dd{ } #v-lotto-a-premium .pre-box dl dd select{ padding:10px 0; width:100%; max-width:260px; text-align:center; outline:none; border:solid 1px #eee; } #v-lotto-a-premium .msg-box{ margin:30px 0; text-align:center;opacity: 0.6; } #v-lotto-a-premium .msg-box .icon{ font-size:3.3em; } #v-lotto-a-premium .msg-box .msg{ margin:10px 0;} #v-lotto-a-premium .msg-box.this-wran{color:red; } #v-lotto-a-premium .msg-box.this-none{ color:#999; } #v-lotto-a-premium .msg-box.this-apply{ color:blue; } #v-lotto-a-premium .list{ margin:45px 0; overflow: hidden; } #v-lotto-a-premium .list .apply-btn{ text-align:center;} #v-lotto-a-premium .list .apply-btn a{ border:solid 1px #000; background:#000; color:#fff; width:100%; max-width:210px; text-align:center; padding:15px 0;} /* ** a/analyze */ #v-lotto-a-analyze{ overflow: hidden; } #v-lotto-a-analyze .bc{ font-size:13px; color:#94a3b8; margin:14px 0 0; line-height:2; } #v-lotto-a-analyze .menu{ margin-bottom:30px; text-align:center; } #v-lotto-a-analyze .menu a{ color:#333; margin:0 5px; } #v-lotto-a-analyze .menu a.on{ font-weight:900; } #v-lotto-a-analyze .item-box{ overflow: hidden; } #v-lotto-a-analyze .item-box .item{ overflow: hidden; margin-bottom:20px;} #v-lotto-a-analyze .item-box .item .no{ margin:5px 0; } #v-lotto-a-analyze .item-box .item .no .txt{ font-weight:900; background:#999; color:#fff; border-radius:0 10px 10px 0; padding:0 10px;} #v-lotto-a-analyze .item-box .item .num-group{ width:11.11%; padding:0 2px; text-align:center; } #v-lotto-a-analyze .item-box .item .num-group .num{ width:100%; background:#fafafa; font-size:12px; padding:0 3px; color:#999 } #v-lotto-a-analyze .item-box .item .num-group .num.on{ background:cornflowerblue; color:#fff; } #v-lotto-a-analyze .item-box .item .num-group .num.bn{ background:crimson; color:#fff; } /** ** w/store (SEO 개편) — 허브/시도/구군/판매점상세/회차 ** 기존 /cdn/css/lotto.css 의 "w/store" 블록 아래에 이어붙이세요. **/ /* 공통 래퍼 */ [id^="v-lotto-w2-"]{ overflow:hidden; margin-bottom:60px; padding:0 2%; box-sizing:border-box; } [id^="v-lotto-w2-"] .bc{ font-size:13px; color:#c7cad0; margin:14px 0 10px; line-height:2; } [id^="v-lotto-w2-"] .bc a{ display:inline-block; padding:4px 9px; border-radius:20px; color:#f04; font-weight:800; text-decoration:none; transition:background .12s ease; } [id^="v-lotto-w2-"] .bc a:hover, [id^="v-lotto-w2-"] .bc a:active{ background:rgba(255,0,68,.1); } [id^="v-lotto-w2-"] .bc strong{ display:inline-block; padding:0 2px; color:#666; font-weight:700; } [id^="v-lotto-w2-"] h1.tit{ font-size:21px; font-weight:900; font-family:'Noto Sans KR',sans-serif; margin:6px 0; } [id^="v-lotto-w2-"] h2.tit{ font-size:17px; font-weight:900; font-family:'Noto Sans KR',sans-serif; margin:26px 0 12px; border-bottom:solid 1px #eee; padding-bottom:7px; } [id^="v-lotto-w2-"] .lead{ color:#888; font-size:13px; line-height:21px; margin:0 0 14px; } [id^="v-lotto-w2-"] .empty{ text-align:center; color:#999; margin:24px 0; } [id^="v-lotto-w2-"] .empty .icon{ font-size:45px; margin:12px 0; } [id^="v-lotto-w2-"] .empty .msg{ font-size:13px; } /* 지역 그리드 (시도/구군 공용) */ [id^="v-lotto-w2-"] .region-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin:6px 0; } [id^="v-lotto-w2-"] .region-grid a{ display:flex; flex-direction:column; gap:3px; padding:13px; border:solid 1px #eee; border-radius:10px; background:#fafafa; text-decoration:none; } [id^="v-lotto-w2-"] .region-grid a:hover{ border-color:slategrey; background:#fff; } [id^="v-lotto-w2-"] .region-grid .rg-name{ font-weight:900; font-size:15px; color:#333; } [id^="v-lotto-w2-"] .region-grid .rg-cnt{ font-size:12px; color:#999; } /* 구군 요약(AEO FAQ 답변과 동일 내용을 화면에도 노출) */ [id^="v-lotto-w2-"] .gugun-faq{ background:#fafafa; border:solid 1px #eee; border-radius:10px; padding:12px 14px; margin:0 0 16px; } [id^="v-lotto-w2-"] .gugun-faq p{ margin:0; font-size:13px; color:#555; line-height:1.7; } [id^="v-lotto-w2-"] .gugun-faq strong{ color:#333; } /* 판매점 리스트 (행) */ [id^="v-lotto-w2-"] .shop-list{ overflow:hidden; } [id^="v-lotto-w2-"] .shop-list .row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:13px 10px; border-bottom:solid 1px #eee; text-decoration:none; } [id^="v-lotto-w2-"] .shop-list .row:first-child{ border-top:solid 1px #eee; } [id^="v-lotto-w2-"] .shop-list .row .rname{ flex:1 1 auto; min-width:120px; font-weight:900; color:#333; } [id^="v-lotto-w2-"] .shop-list .row .rname i{ color:#999; margin-right:4px; } [id^="v-lotto-w2-"] .shop-list .row .badge1{ font-size:12px; padding:2px 8px; border-radius:10px; background:#ffe9c7; color:#a9760a; white-space:nowrap; } [id^="v-lotto-w2-"] .shop-list .row .badge2{ font-size:12px; padding:2px 8px; border-radius:10px; background:#e0ecff; color:#2d5bb8; white-space:nowrap; } [id^="v-lotto-w2-"] .shop-list .row .rmethod{ width:100%; font-size:11px; color:#999; } /* 동일 판매점 다중당첨 묶음 표시("×4") */ [id^="v-lotto-w2-"] .shop-list .row .rcount{ display:inline-block; margin-left:6px; font-size:11px; font-weight:800; padding:1px 7px; border-radius:10px; background:#ffe3e3; color:#d23; vertical-align:middle; } /* 판매점 상세 */ [id^="v-lotto-w2-"] .shop-stat{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0; } [id^="v-lotto-w2-"] .shop-stat .box{ display:flex; flex-direction:column; align-items:center; padding:14px 6px; background:#fafafa; border-radius:10px; } [id^="v-lotto-w2-"] .shop-stat .box .num{ font-size:23px; font-weight:900; color:slategrey; font-family:'Noto Sans KR',sans-serif; } [id^="v-lotto-w2-"] .shop-stat .box .lbl{ font-size:12px; color:#999; margin-top:2px; } [id^="v-lotto-w2-"] .shop-info{ width:100%; border-collapse:collapse; margin:10px 0; } [id^="v-lotto-w2-"] .shop-info th{ width:64px; text-align:left; color:#999; font-weight:500; padding:9px; vertical-align:top; } [id^="v-lotto-w2-"] .shop-info td{ padding:9px; border-bottom:solid 1px #f0f0f0; } [id^="v-lotto-w2-"] .shop-info td a{ color:slategrey; } /* 회차/이력 테이블 */ [id^="v-lotto-w2-"] .w2-table{ width:100%; border-collapse:collapse; margin-top:8px; font-size:14px; } [id^="v-lotto-w2-"] .w2-table th{ background:#fafafa; padding:9px; text-align:left; font-weight:900; font-size:13px; } [id^="v-lotto-w2-"] .w2-table td{ padding:9px; border-bottom:solid 1px #f0f0f0; } [id^="v-lotto-w2-"] .w2-table td a{ color:#333; } [id^="v-lotto-w2-"] .rk{ display:inline-block; font-size:12px; padding:1px 7px; border-radius:10px; } [id^="v-lotto-w2-"] .rk1{ background:#ffe9c7; color:#a9760a; } [id^="v-lotto-w2-"] .rk2{ background:#e0ecff; color:#2d5bb8; } /* 당첨번호 볼 */ [id^="v-lotto-w2-"] .balls{ display:inline-flex; align-items:center; gap:3px; flex-wrap:wrap; } [id^="v-lotto-w2-"] .balls .ball{ display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:50%; color:#fff; font-size:12px; font-weight:900; } [id^="v-lotto-w2-"] .balls .plus{ color:#bbb; margin:0 2px; } [id^="v-lotto-w2-"] .balls .g1{ background:#FFBF05; } [id^="v-lotto-w2-"] .balls .g2{ background:#03F; } [id^="v-lotto-w2-"] .balls .g3{ background:#F00; } [id^="v-lotto-w2-"] .balls .g4{ background:#333; } [id^="v-lotto-w2-"] .balls .g5{ background:#01DF3A; } /* 회차 상세 헤더/탭 */ [id^="v-lotto-w2-"] .round-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px; background:#fafafa; border-radius:10px; margin:10px 0; } [id^="v-lotto-w2-"] .round-head .rdate{ font-size:13px; color:#999; } [id^="v-lotto-w2-"] .rank-tab{ display:flex; gap:6px; margin:14px 0; } [id^="v-lotto-w2-"] .rank-tab a{ padding:7px 16px; border:solid 1px #eee; border-radius:50px; text-decoration:none; color:#666; font-size:14px; font-weight:900; } [id^="v-lotto-w2-"] .rank-tab a.on{ background:slategrey; color:#fff; border-color:slategrey; } [id^="v-lotto-w2-"] .area-tab{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; } [id^="v-lotto-w2-"] .area-tab button{ padding:6px 12px; border:solid 1px #eee; border-radius:50px; background:#fff; color:#666; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; } [id^="v-lotto-w2-"] .area-tab button.on{ background:slategrey; color:#fff; border-color:slategrey; } [id^="v-lotto-w2-"] .area-tab button .cnt{ font-size:11px; color:#999; margin-left:2px; } [id^="v-lotto-w2-"] .area-tab button.on .cnt{ color:rgba(255,255,255,.75); } [id^="v-lotto-w2-"] .round-row .raddr{ width:100%; font-size:12px; color:#aaa; } [id^="v-lotto-w2-"] .round-row .rmethod{ font-size:12px; color:#999; } /* 페이저 */ [id^="v-lotto-w2-"] .pager{ display:flex; justify-content:center; align-items:center; gap:14px; margin:22px 0; font-size:14px; } [id^="v-lotto-w2-"] .pager a{ color:slategrey; text-decoration:none; font-weight:900; } /* 상세 지도 (기존 #store-mapview 재사용 가능하나 인라인용 별도 박스) */ [id^="v-lotto-w2-"] .w2-map{ width:100%; height:280px; border-radius:10px; border:solid 1px #eee; margin:12px 0; position:relative; overflow:hidden; } [id^="v-lotto-w2-"] .w2-map .search-empty{ text-align:center; display:flex; align-items:center; justify-content:center; width:100%; position:absolute; height:100%; } [id^="v-lotto-w2-"] .w2-map .search-empty .icon{ font-size:65px; width:100%; } [id^="v-lotto-w2-"] .w2-map .search-empty .msg{ color:#999; } @media screen and (max-width:512px){ [id^="v-lotto-w2-"] .shop-stat{ grid-template-columns:repeat(2,1fr); } [id^="v-lotto-w2-"], #v-lotto-s2-result, #v-lotto-s-attend, #v-lotto-w-status{ padding-left:14px; padding-right:14px; box-sizing:border-box; } } /** ** Shared: 연구일지 카드 (rl-*) ** lab/research + lotto/index 공용 **/ :root{ --rl-navy:#0f2744; --rl-blue:#1d4ed8; --rl-blue-s:#eff6ff; --rl-line:#e2e8f0; --rl-bg:#f8fafc; --rl-ink:#0f172a; --rl-sub:#64748b; --rl-green:#16a34a; --rl-red:#dc2626; --rl-gray:#94a3b8; } /* 페이지 헤더 */ .rl-page-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 0 12px; } .rl-page-title{ display:flex; align-items:center; gap:10px; font-size:20px; font-weight:900; color:var(--rl-ink); } .rl-page-title i{ color:var(--rl-blue); font-size:18px; } .rl-page-h1{ margin:0; font:inherit; color:inherit; } /* h1이지만 기존 span 스타일 그대로 유지 */ .rl-new-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--rl-navy); color:#fff !important; text-decoration:none !important; font-size:13px; font-weight:800; padding:9px 16px; border-radius:10px; transition:background .14s; font-family:'Noto Sans KR',sans-serif; } .rl-new-btn:hover{ background:var(--rl-blue); } /* 필터 영역 */ .rl-filter-wrap{ background:#fff; border:1px solid var(--rl-line); border-radius:14px; padding:14px 16px; margin-bottom:14px; display:flex; flex-direction:column; gap:10px; } .rl-tabs{ display:flex; gap:6px; flex-wrap:wrap; } .rl-tab{ display:inline-flex; align-items:center; font-size:13px; font-weight:700; padding:7px 15px; border-radius:20px; border:1px solid var(--rl-line); color:var(--rl-sub); background:var(--rl-bg); cursor:pointer; text-decoration:none !important; transition:all .13s; } .rl-tab:hover{ background:var(--rl-blue-s); border-color:var(--rl-blue); color:var(--rl-blue); } .rl-tab.on{ background:var(--rl-navy); color:#fff !important; border-color:var(--rl-navy); } /* 검색 */ .rl-search-row{ display:flex; align-items:center; gap:6px; } .rl-search-input{ flex:1; min-width:0; padding:9px 13px; border:1px solid var(--rl-line); border-radius:9px; font-size:14px; outline:none; transition:border-color .13s; } .rl-search-input:focus{ border-color:var(--rl-blue); } .rl-search-clear, .rl-search-btn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; text-decoration:none !important; font-size:14px; flex-shrink:0; transition:all .13s; cursor:pointer; } .rl-search-clear{ background:var(--rl-bg); border:1px solid var(--rl-line); color:var(--rl-sub); } .rl-search-btn{ background:var(--rl-navy); color:#fff !important; border:none; } .rl-search-btn:hover{ background:var(--rl-blue); } /* 광고 공통 */ .rl-ad{ background:#fff; border:1px solid var(--rl-line); border-radius:12px; padding:10px 14px; margin-bottom:12px; position:relative; overflow:hidden; text-align:center; } .rl-ad-label{ display:block; font-size:10px; font-weight:700; color:var(--rl-gray); letter-spacing:.08em; margin-bottom:6px; text-align:left; } .rl-ad-inner{ display:flex; justify-content:center; align-items:center; } .rl-ad-top{ background:var(--rl-bg); } /* 카드 목록 */ .rl-list{ display:flex; flex-direction:column; gap:10px; } .rl-card{ position:relative; display:flex; align-items:stretch; background:#fff; border:1px solid var(--rl-line); border-radius:14px; overflow:hidden; transition:box-shadow .15s, transform .12s; cursor:pointer; } .rl-card:hover{ box-shadow:0 4px 20px rgba(15,39,68,.10); transform:translateY(-1px); } .rl-card-link{ position:absolute; inset:0; z-index:1; } /* 좌측 액센트 바 */ .rl-card-accent{ width:5px; flex-shrink:0; background:var(--rl-gray); } .rl-type-free .rl-card-accent{ background:var(--rl-green); } .rl-type-pay .rl-card-accent{ background:var(--rl-blue); } .rl-type-hidden .rl-card-accent{ background:var(--rl-gray); } /* 카드 본문 */ .rl-card-body{ flex:1; min-width:0; padding:14px 12px; } .rl-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; } .rl-card-badges{ display:flex; gap:5px; flex-wrap:wrap; } .rl-badge{ display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:800; padding:3px 9px; border-radius:20px; white-space:nowrap; } .rl-b-free { background:#dcfce7; color:var(--rl-green); } .rl-b-pay { background:var(--rl-blue-s); color:var(--rl-blue); } .rl-b-hidden{ background:#f1f5f9; color:var(--rl-sub); } .rl-b-closed{ background:#f1f5f9; color:var(--rl-sub); } .rl-b-owner { background:#fef9c3; color:#854d0e; } .rl-card-date{ font-size:11px; color:var(--rl-gray); white-space:nowrap; flex-shrink:0; } .rl-card-title{ font-size:15px; font-weight:900; color:var(--rl-ink); margin:0 0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rl-card-intro{ font-size:13px; color:var(--rl-sub); margin:0 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .rl-card-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:12px; color:var(--rl-sub); } .rl-meta-sep{ color:var(--rl-line); } /* 우측 화살표 */ .rl-card-go{ display:flex; align-items:center; justify-content:center; width:36px; flex-shrink:0; color:var(--rl-line); font-size:13px; transition:color .13s; } .rl-card:hover .rl-card-go{ color:var(--rl-blue); } /* 빈 상태 */ .rl-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:56px 24px; gap:10px; text-align:center; } .rl-empty-icon{ font-size:48px; color:var(--rl-line); } .rl-empty-msg{ font-size:18px; font-weight:900; color:var(--rl-ink); } .rl-empty-sub{ font-size:14px; color:var(--rl-sub); } .rl-empty-btn{ display:inline-flex; align-items:center; gap:7px; background:var(--rl-navy); color:#fff !important; text-decoration:none !important; font-size:14px; font-weight:800; padding:11px 22px; border-radius:10px; margin-top:6px; transition:background .14s; } .rl-empty-btn:hover{ background:var(--rl-blue); } /* 페이징 */ .rl-paging{ text-align:center; padding:16px 0 8px; } @media(max-width:460px){ .rl-card-title{ font-size:14px; } .rl-card-intro{ font-size:12px; } .rl-filter-wrap{ padding:12px; } } /** ** lotto/index — 연구일지 섹션 헤더 **/ #v-lotto-index .li-section-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 0 12px; } #v-lotto-index .li-section-tit{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:900; color:var(--li-ink,#0f172a); } #v-lotto-index .li-section-tit i{ color:var(--li-blue,#1d4ed8); font-size:15px; } #v-lotto-index .li-section-more{ font-size:12px; font-weight:700; color:var(--li-sub,#64748b); text-decoration:none; border:1px solid var(--li-line,#e2e8f0); border-radius:6px; padding:5px 12px; background:#fff; display:inline-flex; align-items:center; gap:4px; transition:all .14s; } #v-lotto-index .li-section-more:hover{ background:var(--li-navy,#0f2744); color:#fff; border-color:var(--li-navy,#0f2744); } #v-lotto-index .li-research-more{ text-align:center; margin-top:12px; } #v-lotto-index .li-research-more a{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--li-ink,#0f172a); border:1px solid var(--li-line,#e2e8f0); border-radius:8px; padding:10px 24px; background:#fff; text-decoration:none; transition:all .14s; } #v-lotto-index .li-research-more a:hover{ background:var(--li-navy,#0f2744); border-color:var(--li-navy,#0f2744); color:#fff; } /** ** lotto/index — Corporate Redesign **/ #v-lotto-index{ --li-navy:#0f2744; --li-blue:#1d4ed8; --li-blue-s:#eff6ff; --li-ink:#0f172a; --li-sub:#64748b; --li-line:#e2e8f0; --li-bg:#f8fafc; } /* ── 최신 회차 카드 ── */ #v-lotto-index .li-card{ background:#fff; border:1px solid var(--li-line); border-top:3px solid var(--li-blue); border-radius:14px; box-shadow:0 4px 20px rgba(15,23,42,.07); overflow:hidden; margin-bottom:0; } /* 카드 헤더 */ #v-lotto-index .li-card-head{ display:flex; align-items:center; gap:10px; padding:16px 18px 14px; border-bottom:1px solid var(--li-line); } #v-lotto-index .li-round{ flex-shrink:0; } #v-lotto-index .li-round-no{ display:inline-block; font-size:12px; font-weight:900; letter-spacing:.07em; color:var(--li-blue); background:var(--li-blue-s); border:1px solid #bfdbfe; border-radius:50px; padding:3px 12px; } #v-lotto-index .li-draw-date{ flex:1; font-size:13px; color:var(--li-sub); } #v-lotto-index .li-draw-date i{ margin-right:4px; } #v-lotto-index .li-all-link{ flex-shrink:0; font-size:12px; font-weight:700; color:var(--li-sub); border:1px solid var(--li-line); border-radius:6px; padding:5px 12px; text-decoration:none; transition:background .14s, color .14s; display:inline-flex; align-items:center; gap:4px; } #v-lotto-index .li-all-link:hover{ background:var(--li-navy); color:#fff; border-color:var(--li-navy); } /* 볼 */ #v-lotto-index .li-balls{ padding:16px 12px 10px; } #v-lotto-index .li-balls .c-lotto-box{ justify-content:center; gap:5px; } #v-lotto-index .li-balls .c-lotto{ width:auto !important; } #v-lotto-index .li-balls .c-lotto .ball{ width:48px !important; height:48px; line-height:48px !important; font-size:17px; font-weight:900; box-shadow:0 3px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.3); } #v-lotto-index .li-balls .c-lotto .plus{ line-height:48px !important; width:22px !important; color:var(--li-sub); font-size:12px; } @media(max-width:480px){ #v-lotto-index .li-balls .c-lotto .ball{ width:38px !important; height:38px; line-height:38px !important; font-size:14px; } #v-lotto-index .li-balls .c-lotto .plus{ line-height:38px !important; } } /* 1등 당첨금 */ #v-lotto-index .li-prize{ text-align:center; padding:16px 20px 14px; background:var(--li-blue-s); border-top:1px solid #dbeafe; border-bottom:1px solid #dbeafe; } #v-lotto-index .li-prize-label{ font-size:11px; font-weight:800; letter-spacing:.07em; color:var(--li-sub); text-transform:uppercase; margin-bottom:6px; } #v-lotto-index .li-prize-amount{ font-size:28px; font-weight:900; color:var(--li-navy); letter-spacing:-.02em; line-height:1.15; margin-bottom:5px; } #v-lotto-index .li-prize-amount i{ font-size:20px; } #v-lotto-index .li-prize-detail{ font-size:12px; color:var(--li-sub); display:flex; align-items:center; justify-content:center; gap:6px; } #v-lotto-index .li-prize-sep{ opacity:.4; } /* 퀵 메뉴 */ #v-lotto-index .li-quick{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--li-line); } #v-lotto-index .li-qm-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 8px; text-decoration:none; gap:7px; border-right:1px solid var(--li-line); transition:background .14s; } #v-lotto-index .li-qm-item:last-child{ border-right:none; } #v-lotto-index .li-qm-item:hover{ background:var(--li-bg); } #v-lotto-index .li-qm-icon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:var(--li-blue-s); color:var(--li-blue); font-size:16px; transition:background .14s, color .14s; } #v-lotto-index .li-qm-item:hover .li-qm-icon{ background:var(--li-navy); color:#fff; } #v-lotto-index .li-qm-label{ font-size:11px; font-weight:800; color:var(--li-ink); letter-spacing:-.01em; } @media(max-width:380px){ #v-lotto-index .li-qm-icon{ width:32px; height:32px; font-size:14px; } #v-lotto-index .li-qm-label{ font-size:10px; } } /* ── 우주 시각화 프로모 카드 (lotto-map) ── */ #v-lotto-index .li-promo-cosmic{ position:relative; display:flex; align-items:center; gap:14px; background:radial-gradient(120% 180% at 12% 15%, #1b2a52 0%, #0c1226 55%, #060911 100%); border-radius:14px; padding:16px 18px; overflow:hidden; text-decoration:none; color:#fff; box-shadow:0 6px 22px rgba(10,15,35,.32); transition:transform .18s ease, box-shadow .18s ease; } #v-lotto-index .li-promo-cosmic:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(10,15,35,.42); } #v-lotto-index .li-promo-cosmic:active{ transform:translateY(0); } #v-lotto-index .li-promo-stars{ position:absolute; inset:0; pointer-events:none; opacity:.9; background-image: radial-gradient(1.6px 1.6px at 18% 28%, #fff 100%, transparent 100%), radial-gradient(1.2px 1.2px at 68% 18%, #cdd6ff 100%, transparent 100%), radial-gradient(1.4px 1.4px at 38% 74%, #fff 100%, transparent 100%), radial-gradient(1px 1px at 84% 58%, #9fb3ff 100%, transparent 100%), radial-gradient(1.3px 1.3px at 53% 42%, #fff 100%, transparent 100%), radial-gradient(1px 1px at 9% 78%, #cdd6ff 100%, transparent 100%), radial-gradient(1.1px 1.1px at 92% 30%, #fff 100%, transparent 100%); } #v-lotto-index .li-promo-constellation{ position:relative; flex-shrink:0; width:104px; height:52px; } #v-lotto-index .li-promo-svg{ width:100%; height:100%; overflow:visible; } #v-lotto-index .li-promo-svg polyline{ fill:none; stroke:rgba(147,197,253,.55); stroke-width:1.3; } #v-lotto-index .li-promo-svg circle{ fill:#fff; filter:drop-shadow(0 0 3px rgba(255,255,255,.85)); } #v-lotto-index .li-promo-svg circle.is-bonus{ fill:#ffd23f; filter:drop-shadow(0 0 4px rgba(255,210,63,.85)); } #v-lotto-index .li-promo-body{ position:relative; flex:1; min-width:0; } #v-lotto-index .li-promo-badge{ display:inline-block; font-size:10px; font-weight:900; letter-spacing:.05em; color:#0b1020; background:linear-gradient(135deg,#ffd23f,#ff9d4d); border-radius:999px; padding:2px 8px; margin-bottom:6px; } #v-lotto-index .li-promo-title{ font-size:14px; font-weight:900; margin-bottom:3px; line-height:1.3; } #v-lotto-index .li-promo-sub{ font-size:11.5px; color:#a8b3d6; line-height:1.5; } #v-lotto-index .li-promo-cta{ position:relative; flex-shrink:0; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:#0b1020; background:#fff; border-radius:999px; padding:8px 14px; white-space:nowrap; } @media(max-width:480px){ #v-lotto-index .li-promo-cosmic{ flex-wrap:wrap; } #v-lotto-index .li-promo-sub{ display:none; } #v-lotto-index .li-promo-constellation{ width:84px; height:42px; } #v-lotto-index .li-promo-cta{ margin-left:auto; } } /* ── 최신 1등 판매점 ── */ #v-lotto-index .li-store{ background:#fff; border:1px solid var(--li-line); border-radius:14px; overflow:hidden; box-shadow:0 4px 20px rgba(15,23,42,.07); } #v-lotto-index .li-store-head{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--li-line); background:var(--li-bg); } #v-lotto-index .li-store-icon{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:var(--li-blue-s); color:var(--li-blue); font-size:13px; flex-shrink:0; } #v-lotto-index .li-store-title{ font-size:15px; font-weight:900; color:var(--li-ink); flex:1; } #v-lotto-index .li-store-badge{ font-size:11px; font-weight:700; color:var(--li-sub); background:#fff; border:1px solid var(--li-line); border-radius:50px; padding:3px 10px; } /* 판매점 아이템 */ #v-lotto-index .li-si{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--li-line); } #v-lotto-index .li-si:last-child{ border-bottom:none; } #v-lotto-index .li-si-rank{ flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:#fff; background:var(--li-navy); border-radius:50%; } #v-lotto-index .li-si:nth-child(1) .li-si-rank{ background:#1d4ed8; } #v-lotto-index .li-si:nth-child(2) .li-si-rank{ background:#2563eb; } #v-lotto-index .li-si:nth-child(3) .li-si-rank{ background:#3b82f6; } #v-lotto-index .li-si-body{ flex:1; min-width:0; } #v-lotto-index .li-si-name{ font-size:14px; font-weight:800; color:var(--li-ink); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #v-lotto-index .li-si-name i{ color:var(--li-blue); margin-right:4px; font-size:12px; } #v-lotto-index .li-si-addr a{ font-size:12px; color:var(--li-sub); text-decoration:none; line-height:1.5; display:-webkit-box; -webkit-line-clamp:1; line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } #v-lotto-index .li-si-addr a:hover{ color:var(--li-blue); } #v-lotto-index .li-si-addr i{ margin-right:3px; font-size:11px; } #v-lotto-index .li-si-type{ flex-shrink:0; font-size:11px; font-weight:800; border-radius:4px; padding:3px 8px; } #v-lotto-index .li-si-type-1{ color:#1d4ed8; background:#dbeafe; } #v-lotto-index .li-si-type-2{ color:#047857; background:#d1fae5; } /* 전체보기 버튼 */ #v-lotto-index .li-store-goto{ padding:14px 18px; border-top:1px solid var(--li-line); background:var(--li-bg); text-align:center; } #v-lotto-index .li-store-goto a{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--li-ink); text-decoration:none; border:1px solid var(--li-line); border-radius:8px; padding:9px 22px; background:#fff; transition:background .14s, border-color .14s, color .14s; } #v-lotto-index .li-store-goto a:hover{ background:var(--li-navy); border-color:var(--li-navy); color:#fff; } /* ============================================================ lotto/g/_e/menu.php — 로또고/쓰리또 서브탭 메뉴 ============================================================ */ .gt-sub-tabs{ display:flex; gap:2px; padding:8px 0 14px; } .gt-sub-tab{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:8px 14px; color:#94a3b8; background:none; border:none; text-decoration:none !important; border-bottom:2px solid transparent; transition:color .13s, border-color .13s; } .gt-sub-tab i{ font-size:12px; transition:color .13s; } .gt-sub-tab:hover{ color:#0f2744 !important; } .gt-sub-tab.on{ color:#0f2744 !important; font-weight:900; border-bottom-color:#0f2744; } .gt-sub-tab.on i{ color:#0f2744; } /* ============================================================ lotto/lab/rlog-info.php, rlog-rating.php, rlog-signin.php — 연구일지 상세 공통 (ri-*) ============================================================ */ .ri-wrap{ --ri-navy:#0f2744; --ri-blue:#1d4ed8; --ri-blue-s:#eff6ff; --ri-line:#e2e8f0; --ri-bg:#f8fafc; --ri-ink:#0f172a; --ri-sub:#64748b; --ri-green:#16a34a; --ri-red:#dc2626; --ri-yellow:#d97706; padding-bottom:40px; } /* 헤더 */ .ri-header{ padding:20px 0 14px; border-bottom:1px solid var(--ri-line); margin-bottom:0; } .ri-header-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; } .ri-header-badges .badge{ font-size:11px; padding:4px 10px; border-radius:20px; } .ri-title{ font-size:22px; font-weight:900; color:var(--ri-ink); margin:0 0 10px; line-height:1.3; } .ri-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--ri-sub); } .ri-meta-sep{ color:var(--ri-line); } /* 탭 */ .ri-tabs{ display:flex; gap:0; border-bottom:2px solid var(--ri-line); margin-bottom:18px; } .ri-tab{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:800; padding:12px 18px; color:var(--ri-sub); text-decoration:none !important; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .13s, border-color .13s; } .ri-tab:hover{ color:var(--ri-blue); } .ri-tab-on{ color:var(--ri-navy) !important; border-bottom-color:var(--ri-navy); } .ri-tab-cnt{ display:inline-flex; align-items:center; justify-content:center; background:var(--ri-blue); color:#fff; font-size:10px; font-weight:900; min-width:18px; height:18px; padding:0 5px; border-radius:20px; } /* 소개 카드 */ .ri-intro-card{ background:#fff; border:1px solid var(--ri-line); border-radius:12px; padding:18px 20px; margin-bottom:14px; position:relative; } .ri-quote-icon{ font-size:22px; color:var(--ri-blue-s); margin-bottom:8px; display:block; } .ri-intro-text{ font-size:14px; color:var(--ri-sub); line-height:1.7; margin:0; white-space:pre-line; } /* 광고 */ .ri-ad{ background:var(--ri-bg); border:1px solid var(--ri-line); border-radius:10px; padding:10px 14px; margin-bottom:14px; text-align:center; } .ri-ad-inner{ display:flex; justify-content:center; } /* 소유자 바 */ .ri-owner-bar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; } .ri-owner-btn{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; padding:9px 16px; border-radius:10px; background:var(--ri-navy); color:#fff !important; text-decoration:none !important; transition:background .13s; } .ri-owner-btn:hover{ background:var(--ri-blue); } .ri-btn-sec{ background:var(--ri-bg); color:var(--ri-ink) !important; border:1px solid var(--ri-line); } .ri-btn-sec:hover{ background:var(--ri-line); } /* 분석팩 섹션 */ .ri-pack-section{ background:#fff; border:1px solid var(--ri-line); border-radius:14px; overflow:hidden; } .ri-section-head{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:900; color:var(--ri-ink); padding:14px 18px; border-bottom:1px solid var(--ri-line); background:var(--ri-bg); } .ri-section-head i{ color:var(--ri-blue); } /* 잠금 상태 */ .ri-pack-locked{ display:flex; flex-direction:column; align-items:center; padding:40px 24px; gap:10px; text-align:center; } .ri-lock-icon{ font-size:48px; color:var(--ri-line); margin-bottom:4px; } .ri-lock-title{ font-size:18px; font-weight:900; color:var(--ri-ink); margin:0; } .ri-lock-desc{ font-size:14px; color:var(--ri-sub); margin:0; line-height:1.6; } .ri-lock-price{ margin:6px 0; } .ri-price-free{ display:inline-block; background:#dcfce7; color:var(--ri-green); font-size:18px; font-weight:900; padding:6px 20px; border-radius:20px; } .ri-price-pay{ display:inline-block; background:var(--ri-blue-s); color:var(--ri-blue); font-size:18px; font-weight:900; padding:6px 20px; border-radius:20px; } .ri-get-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--ri-navy); color:#fff; border:none; font-size:15px; font-weight:900; padding:13px 28px; border-radius:12px; cursor:pointer; transition:background .13s; margin-top:4px; font-family:'Noto Sans KR',sans-serif; } .ri-get-btn:hover{ background:var(--ri-blue); } /* 열람 가능: 상단 액션 바 */ .ri-pack-notice{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:12px 18px; border-bottom:1px solid var(--ri-line); background:#f0fdf4; font-size:13px; font-weight:700; color:var(--ri-green); } .ri-pack-notice i{ margin-right:4px; } .ri-apply-btn{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; padding:8px 16px; border-radius:8px; background:var(--ri-navy); color:#fff; border:none; cursor:pointer; transition:background .13s; font-family:'Noto Sans KR',sans-serif; } .ri-apply-btn:hover, .ri-apply-btn:focus{ background:var(--ri-blue); color:#fff; } /* 번호 그룹 */ .ri-group{ padding:12px 14px 0; } .ri-group:last-child{ padding-bottom:14px; } .ri-group-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:50px; height:24px; padding:0 10px; border-radius:6px; font-size:11px; font-weight:900; margin-bottom:8px; } .ri-group-badge.lotto-group-1{ background:#FFBF05; color:#5a4200; } .ri-group-badge.lotto-group-2{ background:#0033ff; color:#fff; } .ri-group-badge.lotto-group-3{ background:#ff0000; color:#fff; } .ri-group-badge.lotto-group-4{ background:#444; color:#fff; } .ri-group-badge.lotto-group-5{ background:#01df3a; color:#004d14; } /* 번호 카드 그리드 */ .ri-num-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-bottom:10px; } @media(min-width:480px){ .ri-num-grid{ grid-template-columns:repeat(10,1fr); } } .ri-num-card{ border:1px solid var(--ri-line); border-radius:9px; padding:7px 5px; background:var(--ri-bg); display:flex; flex-direction:column; align-items:center; gap:5px; } .ri-num-card.ri-modified{ background:#fffbeb; border-color:#fde68a; } .ri-num-ball{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; position:relative; } .ri-num-ball::after{ content:''; position:absolute; top:9%; left:15%; width:36%; height:28%; border-radius:50%; background:rgba(255,255,255,.32); pointer-events:none; } .ri-num-ball.lotto-group-1{ background:#FFBF05; color:#5a4200; } .ri-num-ball.lotto-group-2{ background:#0033ff; color:#fff; } .ri-num-ball.lotto-group-3{ background:#ff0000; color:#fff; } .ri-num-ball.lotto-group-4{ background:#444; color:#fff; } .ri-num-ball.lotto-group-5{ background:#01df3a; color:#004d14; } .ri-num-vals{ display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; } .ri-val{ font-size:10px; font-weight:800; color:var(--ri-sub); line-height:1; width:100%; text-align:center; } .ri-val-hi{ color:var(--ri-blue); } .ri-val-lo{ color:var(--ri-sub); opacity:.5; } .ri-val-p { color:var(--ri-yellow); } .ri-val-p-hi{ color:var(--ri-red); } /* ── 추첨 애니메이션 (auto.php 공용 클래스 재선언) ── */ #ri-lotto-animation{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999; display:flex; align-items:center; justify-content:center; } #ri-lotto-animation .lotto-animation-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(15,39,68,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } #ri-lotto-animation .lotto-animation-container{ position:relative; z-index:1; background:#fff; border-radius:20px; padding:36px 28px 28px; box-shadow:0 24px 60px rgba(0,0,0,.35); max-width:400px; width:88%; text-align:center; animation:saModalIn .3s cubic-bezier(.34,1.3,.64,1); } @keyframes saModalIn{ from{ opacity:0; transform:translateY(24px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } } #ri-lotto-animation .sa-anim-badge{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:#eff6ff; color:#1d4ed8; font-size:20px; margin:0 auto 14px; animation:saSpin 1.8s linear infinite; } @keyframes saSpin{ to{ transform:rotate(360deg); } } #ri-lotto-animation .lotto-animation-header h3{ font-size:20px; font-weight:900; color:#0f2744; margin:0 0 6px; } #ri-lotto-animation .lotto-animation-header p { font-size:13px; color:#64748b; margin:0; } #ri-lotto-animation .lotto-balls-container{ display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin:24px 0 20px; min-height:68px; } #ri-lotto-animation .lotto-ball-placeholder{ width:52px; height:52px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:17px; font-weight:900; background:#f1f5f9; color:#94a3b8; border:2px solid #e2e8f0; opacity:.3; transform:scale(.75); transition:opacity .2s,transform .2s; } #ri-lotto-animation .lotto-ball-placeholder.show{ opacity:1; transform:scale(1); animation:saBallIn .4s cubic-bezier(.34,1.56,.64,1); } @keyframes saBallIn{ 0% { transform:scale(0) rotate(-30deg); opacity:0; } 60% { transform:scale(1.18) rotate(6deg); } 100%{ transform:scale(1) rotate(0deg); opacity:1; } } #ri-lotto-animation .ball-1-10 { background:#FFBF05; border-color:#d9a400; color:#5a4200; box-shadow:0 4px 14px rgba(255,191,5,.4); } #ri-lotto-animation .ball-11-20{ background:#0033ff; border-color:#0026cc; color:#fff; box-shadow:0 4px 14px rgba(0,51,255,.35); } #ri-lotto-animation .ball-21-30{ background:#ff0000; border-color:#cc0000; color:#fff; box-shadow:0 4px 14px rgba(255,0,0,.35); } #ri-lotto-animation .ball-31-40{ background:#333; border-color:#111; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.35); } #ri-lotto-animation .ball-41-45{ background:#01df3a; border-color:#00b02e; color:#004d14; box-shadow:0 4px 14px rgba(1,223,58,.35); } #ri-lotto-animation .lotto-animation-footer{ margin-top:4px; } #ri-lotto-animation .loading-spinner{ width:32px; height:32px; margin:0 auto; border:3px solid #e2e8f0; border-top-color:#1d4ed8; border-radius:50%; animation:saSpin2 .75s linear infinite; } @keyframes saSpin2{ to{ transform:rotate(360deg); } } /* ── 결과 모달 ── */ #ri-result-modal{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:99998; display:flex; align-items:center; justify-content:center; } #ri-result-modal .sa-res-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(15,39,68,.75); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); cursor:pointer; } #ri-result-modal .sa-res-container{ position:relative; z-index:1; background:#fff; border-radius:20px; overflow:hidden; max-width:380px; width:92%; box-shadow:0 24px 60px rgba(0,0,0,.35); animation:saModalIn .3s cubic-bezier(.34,1.3,.64,1); } #ri-result-modal .sa-res-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f0f4f8; } #ri-result-modal .sa-res-title{ font-size:16px; font-weight:900; color:#0f2744; display:flex; align-items:center; gap:8px; } #ri-result-modal .sa-res-title i{ color:#f59e0b; } #ri-result-modal .sa-res-close{ width:30px; height:30px; border-radius:50%; border:1px solid #e2e8f0; background:#f8fafc; color:#64748b; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; padding:0; transition:all .14s; } #ri-result-modal .sa-res-close:hover{ background:#fee2e2; color:#ef4444; border-color:#fca5a5; } #ri-result-modal .sa-res-body{ padding:14px 16px; max-height:55vh; overflow-y:auto; } #ri-result-modal .sa-res-footer{ display:flex; gap:10px; padding:14px 16px; border-top:1px solid #f0f4f8; } #ri-result-modal .sa-res-btn-cap{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; background:#0f2744; color:#fff; border:none; font-size:14px; font-weight:800; padding:12px 0; border-radius:10px; cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:background .14s; } #ri-result-modal .sa-res-btn-cap:hover{ background:#1d4ed8; } #ri-result-modal .sa-res-btn-retry{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; background:#f8fafc; color:#374151; border:1px solid #e2e8f0; font-size:14px; font-weight:800; padding:12px 0; border-radius:10px; cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:all .14s; } #ri-result-modal .sa-res-btn-retry:hover{ background:#0f2744; color:#fff; border-color:#0f2744; } /* 결과 볼 */ #tgi-lottoResultView .c-lotto-box{ display:flex; align-items:center; justify-content:center; gap:5px; padding:10px 14px; margin-bottom:8px; background:#fff; border-radius:10px; border:1px solid #e2e8f0; } #tgi-lottoResultView .c-lotto-box:last-child{ margin-bottom:0; } #tgi-lottoResultView .c-lotto{ width:auto !important; } #tgi-lottoResultView .c-lotto .ball{ position:relative !important; width:44px !important; height:44px; line-height:44px !important; font-size:15px !important; font-weight:900; box-shadow:none !important; filter:brightness(1.08) saturate(1.1); } #tgi-lottoResultView .c-lotto .ball::after{ content:''; position:absolute; top:8%; left:14%; width:42%; height:36%; border-radius:50%; background:rgba(255,255,255,.38); pointer-events:none; } /* ── rlog-rating.php 전용 ── */ /* 평가 폼 카드 */ .ri-rating-card{ background:#fff; border:1px solid var(--ri-line); border-radius:14px; overflow:hidden; margin-bottom:16px; } .ri-rating-head{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:900; color:var(--ri-ink); padding:14px 18px; border-bottom:1px solid var(--ri-line); background:var(--ri-bg); } .ri-rating-head i{ color:#f59e0b; } .ri-rating-body{ padding:18px; display:flex; flex-direction:column; gap:16px; } .ri-point-notice{ font-size:13px; color:var(--ri-sub); line-height:1.6; background:var(--ri-blue-s); border:1px solid #bfdbfe; border-radius:8px; padding:10px 14px; } .ri-point-notice i{ color:var(--ri-blue); margin-right:4px; } /* 점수 선택 칩 */ .ri-score-section{ display:flex; flex-direction:column; gap:10px; } .ri-score-label{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:800; color:var(--ri-ink); } .ri-score-display{ background:var(--ri-navy); color:#fff; font-size:14px; font-weight:900; padding:3px 12px; border-radius:20px; } .ri-score-chips{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; } @media(min-width:400px){ .ri-score-chips{ grid-template-columns:repeat(10,1fr); } } .ri-score-chip{ height:38px; border-radius:8px; border:1px solid var(--ri-line); background:var(--ri-bg); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--ri-sub); cursor:pointer; transition:all .12s; } .ri-score-chip:hover{ border-color:var(--ri-blue); color:var(--ri-blue); } .ri-chip-on{ background:var(--ri-navy) !important; color:#fff !important; border-color:var(--ri-navy) !important; } /* 코멘트 */ .ri-comment-section{ display:flex; flex-direction:column; gap:6px; } .ri-comment-label{ font-size:13px; font-weight:800; color:var(--ri-ink); } .ri-comment-label span{ color:var(--ri-sub); font-weight:400; margin-left:4px; } .ri-comment-input{ width:100%; min-height:100px; padding:12px 14px; border:1px solid var(--ri-line); border-radius:10px; font-size:14px; resize:vertical; outline:none; transition:border-color .13s; font-family:'Noto Sans KR',sans-serif; box-sizing:border-box; } .ri-comment-input:focus{ border-color:var(--ri-blue); } .ri-submit-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ri-navy); color:#fff; border:none; font-size:14px; font-weight:900; padding:12px 24px; border-radius:10px; cursor:pointer; transition:background .13s; align-self:flex-start; font-family:'Noto Sans KR',sans-serif; } .ri-submit-btn:hover:not(.disabled){ background:var(--ri-blue); } .ri-submit-btn.disabled{ background:#94a3b8; cursor:default; } /* 상태 안내 카드 */ .ri-rating-status{ display:flex; flex-direction:column; align-items:center; background:#fff; border:1px solid var(--ri-line); border-radius:14px; padding:40px 24px; gap:10px; text-align:center; margin-bottom:16px; } .ri-status-icon{ font-size:44px; } .ri-status-info i{ color:var(--ri-blue); } .ri-status-ok i{ color:var(--ri-green); } .ri-status-lock i{ color:var(--ri-line); } .ri-status-title{ font-size:18px; font-weight:900; color:var(--ri-ink); margin:0; } .ri-status-desc{ font-size:14px; color:var(--ri-sub); margin:0; } .ri-status-btn{ display:inline-flex; align-items:center; gap:7px; background:var(--ri-navy); color:#fff !important; text-decoration:none !important; font-size:14px; font-weight:800; padding:10px 20px; border-radius:10px; margin-top:4px; transition:background .13s; } .ri-status-btn:hover{ background:var(--ri-blue); } /* 평가 통계 */ .ri-rating-stats{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ri-sub); padding:10px 14px; background:#fff; border:1px solid var(--ri-line); border-radius:10px; margin-bottom:10px; } .ri-stats-sep{ color:var(--ri-line); } /* 리뷰 목록 */ .ri-review-list{ display:flex; flex-direction:column; gap:8px; } .ri-review-item{ background:#fff; border:1px solid var(--ri-line); border-radius:12px; padding:14px 16px; } .ri-review-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .ri-review-nick{ font-size:13px; font-weight:800; color:var(--ri-ink); } .ri-review-nick i{ color:var(--ri-sub); margin-right:4px; } .ri-review-right{ display:flex; align-items:center; gap:8px; } .ri-review-date{ font-size:12px; color:var(--ri-sub); } .ri-review-score{ font-size:12px; font-weight:900; padding:3px 9px; border-radius:20px; background:#f1f5f9; color:var(--ri-ink); } .ri-score-hi{ background:#dbeafe; color:var(--ri-blue); } .ri-score-lo{ background:#fee2e2; color:var(--ri-red); } .ri-review-comment{ font-size:14px; color:var(--ri-sub); line-height:1.6; margin:0; } .ri-review-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:40px; text-align:center; color:var(--ri-line); font-size:36px; } .ri-review-empty p{ font-size:14px; color:var(--ri-sub); margin:0; } /* 페이징 */ .ri-paging{ text-align:center; padding:16px 0 0; } /* ── rlog-signin.php 전용 ── */ .ri-signin-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border:1px solid var(--ri-line); border-radius:16px; padding:56px 24px; gap:12px; text-align:center; } .ri-signin-icon{ font-size:52px; color:var(--ri-line); } .ri-signin-title{ font-size:20px; font-weight:900; color:var(--ri-ink); margin:0; } .ri-signin-desc{ font-size:14px; color:var(--ri-sub); margin:0; } .ri-signin-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--ri-navy); color:#fff !important; text-decoration:none !important; font-size:15px; font-weight:900; padding:13px 28px; border-radius:12px; margin-top:6px; transition:background .13s; } .ri-signin-btn:hover{ background:var(--ri-blue); } /* ============================================================ lotto/g/threetto-result.php — 쓰리또 회차 결과 ============================================================ */ #v-lotto-g-threetto-result{ --gt-navy:#0f2744; --gt-blue:#1d4ed8; --gt-line:#e2e8f0; --gt-bg:#f8fafc; --gt-ink:#0f172a; --gt-sub:#64748b; --gt-g1:#FFBF05; --gt-g2:#0033ff; --gt-g3:#ff0000; --gt-g4:#333; --gt-g5:#01df3a; padding-bottom:40px; } .gt-ad-top{ margin:12px 0; border-radius:10px; overflow:hidden; } /* 헤더 */ .gr-header{ display:flex; align-items:center; justify-content:space-between; margin:16px 0 14px; gap:10px; flex-wrap:wrap; } .gr-header-title{ font-size:18px; font-weight:900; color:var(--gt-ink); } .gr-round-sel select{ font-size:14px; font-weight:700; padding:8px 14px; border:1px solid var(--gt-line); border-radius:10px; background:#fff; color:var(--gt-ink); cursor:pointer; outline:none; } /* 리스트 */ .gr-list{ display:flex; flex-direction:column; gap:10px; } /* 카드 */ .gr-item{ background:#fff; border:1px solid var(--gt-line); border-radius:14px; overflow:hidden; transition:box-shadow .13s; } .gr-item:hover{ box-shadow:0 2px 12px rgba(15,39,68,.08); } .gr-item.has-win{ border-color:#fde68a; background:#fffef5; } .gr-item.has-lose{ opacity:.8; } /* 카드 헤더 */ .gr-item-head{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--gt-line); } .gr-round-no{ font-size:15px; font-weight:900; color:var(--gt-ink); } .gr-date{ font-size:13px; color:var(--gt-sub); flex:1; } .gr-result-badge{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; padding:3px 10px; border-radius:10px; } .gr-win{ background:#fef9c3; color:#a16207; border:1px solid #fde047; } .gr-lose{ background:#f1f5f9; color:var(--gt-sub); border:1px solid var(--gt-line); } .gr-pending{ background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; } /* 공 */ .gr-balls{ display:flex; gap:8px; align-items:center; padding:14px 16px; } .gr-ball{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); } .gr-ball-q{ background:#cbd5e1; font-size:18px; color:#94a3b8; } .gr-ball-g1{ background:var(--gt-g1); color:#5a3e00; } .gr-ball-g2{ background:var(--gt-g2); } .gr-ball-g3{ background:var(--gt-g3); } .gr-ball-g4{ background:var(--gt-g4); } .gr-ball-g5{ background:var(--gt-g5); color:#004d14; } /* 현황 */ .gr-stats{ display:flex; gap:0; padding:0 16px 12px; flex-wrap:wrap; } .gr-stat{ display:flex; align-items:center; gap:6px; font-size:13px; padding:4px 10px 4px 0; margin-right:10px; border-right:1px solid var(--gt-line); } .gr-stat:last-child{ border-right:none; } .gr-sl{ color:var(--gt-sub); font-weight:700; } .gr-sv{ color:var(--gt-ink); font-weight:800; } /* 등수 */ .gr-ranks{ display:flex; gap:6px; padding:0 16px 12px; flex-wrap:wrap; } .gr-rank{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:10px; font-size:13px; } .gr-rank-1{ background:#fef9c3; border:1px solid #fde047; } .gr-rank-2{ background:#f1f5f9; border:1px solid var(--gt-line); } .gr-rank-3{ background:#fef2f2; border:1px solid #fca5a5; } .gr-rank-lbl{ font-weight:900; color:var(--gt-ink); } .gr-rank-cnt{ color:var(--gt-sub); } .gr-rank-rp{ font-weight:800; color:var(--gt-blue); } /* 총 지급 */ .gr-total-prize{ margin:0 16px 14px; padding:10px 14px; border-radius:10px; background:var(--gt-blue); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; } .gr-total-prize strong{ margin-left:auto; font-size:15px; font-weight:900; } /* 페이징 */ .gr-paging{ padding:16px 0; text-align:center; } /* 빈 상태 */ .gr-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 0; gap:10px; } .gr-empty-icon{ font-size:48px; color:var(--gt-line); } .gr-empty-msg{ font-size:15px; color:var(--gt-sub); font-weight:700; margin:0; } @media(max-width:480px){ .gr-stats{ gap:0; } .gr-stat{ font-size:12px; padding-right:8px; margin-right:8px; } .gr-balls{ gap:6px; } .gr-ball{ width:34px; height:34px; font-size:13px; } } /* ============================================================ lotto/g/lottogo-result.php — 로또고 회차 결과 ============================================================ */ #v-lotto-g-lottogo-result{ --gl-navy:#0f2744; --gl-blue:#1d4ed8; --gl-line:#e2e8f0; --gl-bg:#f8fafc; --gl-ink:#0f172a; --gl-sub:#64748b; --gl-green:#16a34a; --gl-red:#dc2626; padding-bottom:40px; } .gl-ad-top{ margin:12px 0; border-radius:10px; overflow:hidden; } .glr-list{ display:flex; flex-direction:column; gap:10px; } .glr-item{ background:#fff; border:1px solid var(--gl-line); border-radius:14px; overflow:hidden; } .glr-item.is-win{ border-color:#fde68a; background:#fffef5; } .glr-item.is-lose{ opacity:.85; } .glr-item.is-apply{ border-color:#bbf7d0; } .glr-item-head{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--gl-line); } .glr-round-no{ font-size:15px; font-weight:900; color:var(--gl-ink); } .glr-date{ font-size:13px; color:var(--gl-sub); flex:1; } .glrb{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; padding:3px 10px; border-radius:10px; } .glrb-lotto{ background:#fef9c3; color:#a16207; border:1px solid #fde047; } .glrb-win{ background:#dcfce7; color:#16a34a; border:1px solid #bbf7d0; } .glrb-lose{ background:#f1f5f9; color:var(--gl-sub); border:1px solid var(--gl-line); } .glrb-apply{ background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; } .glrb-ready{ background:#f8fafc; color:var(--gl-sub); border:1px solid var(--gl-line); } /* 고 진행 바 */ .glr-go-bar{ padding:14px 16px 10px; } .glr-go-label{ font-size:13px; color:var(--gl-sub); font-weight:700; margin-bottom:6px; } .glr-go-val{ font-size:16px; font-weight:900; color:var(--gl-ink); margin-right:4px; } .glr-go-lotto{ color:#a16207; } .glr-go-progress-wrap{ height:7px; background:#f1f5f9; border-radius:10px; overflow:hidden; } .glr-go-progress{ height:100%; border-radius:10px; min-width:4px; } .glr-go-progress.is-win{ background:linear-gradient(90deg, #16a34a, #4ade80); } .glr-go-progress.is-lose{ background:linear-gradient(90deg, #dc2626, #f87171); } /* 현황 */ .glr-stats{ display:flex; gap:0; padding:0 16px 12px; flex-wrap:wrap; } .glr-stat{ display:flex; align-items:center; gap:6px; font-size:13px; padding:5px 10px 5px 0; margin-right:10px; border-right:1px solid var(--gl-line); } .glr-stat:last-child{ border-right:none; } .glr-sl{ color:var(--gl-sub); font-weight:700; } .glr-sv{ color:var(--gl-ink); font-weight:800; } .glr-total-prize{ margin:0 16px 14px; padding:10px 14px; border-radius:10px; background:var(--gl-blue); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; } .glr-total-prize strong{ margin-left:auto; font-size:15px; font-weight:900; } .glr-paging{ padding:16px 0; text-align:center; } .glr-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 0; gap:10px; } .glr-empty-icon{ font-size:48px; color:var(--gl-line); } .glr-empty-msg{ font-size:15px; color:var(--gl-sub); font-weight:700; margin:0; } @media(max-width:480px){ .glr-stats{ gap:0; } .glr-stat{ font-size:12px; } } /* ============================================================ lotto/a/analyze.php — 번호 패턴 분석 ============================================================ */ #v-lotto-a-analyze { --az-navy: #0f2744; --az-blue: #1d4ed8; --az-line: #e2e8f0; --az-bg: #f8fafc; --az-ink: #0f172a; --az-sub: #64748b; --g1: #FFBF05; --g2: #0033ff; --g3: #ff0000; --g4: #444; --g5: #01df3a; padding-bottom: 48px; } /* 헤더 */ .az-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 16px 0 18px; flex-wrap: wrap; } .az-header-title { font-size: 20px; font-weight: 900; color: var(--az-ink); margin: 0 0 5px; display: flex; align-items: center; gap: 8px; } .az-header-title i { color: var(--az-blue); } .az-header-sub { font-size: 13px; color: var(--az-sub); margin: 0; font-weight: 600; } .az-round-badge { background: var(--az-bg); border: 1px solid var(--az-line); font-size: 13px; font-weight: 700; color: var(--az-sub); padding: 5px 12px; border-radius: 50px; white-space: nowrap; align-self: flex-start; margin-top: 2px; } /* 광고 */ .az-ad-top { margin-bottom: 16px; border-radius: 10px; overflow: hidden; text-align: center; } /* 탭 */ .az-tabs { display: flex; border-bottom: 2px solid var(--az-line); margin-bottom: 16px; } .az-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: 14px; font-weight: 700; color: var(--az-sub); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; } .az-tab:hover { color: var(--az-ink); } .az-tab.on { color: var(--az-navy); border-bottom-color: var(--az-navy); } /* 요약 통계 바 */ .az-summary { display: flex; align-items: center; background: #fff; border: 1px solid var(--az-line); border-radius: 14px; padding: 14px 20px; margin-bottom: 16px; gap: 0; flex-wrap: wrap; box-shadow: 0 2px 8px rgba(15,39,68,.05); } .az-smi { display: flex; flex-direction: column; gap: 4px; padding: 0 20px; flex: 1; min-width: 120px; } .az-smi:first-child { padding-left: 0; } .az-sml { font-size: 10px; font-weight: 700; color: var(--az-sub); text-transform: uppercase; letter-spacing: .06em; } .az-smv { font-size: 16px; font-weight: 800; color: var(--az-ink); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .az-acc { color: var(--az-blue); } .az-smd { width: 1px; background: var(--az-line); align-self: stretch; } .az-smi-freq { flex: 2; } .az-freq-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; } .az-freq-ball { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; cursor: default; } .az-freq-ball.g1 { background: var(--g1); } .az-freq-ball.g2 { background: var(--g2); } .az-freq-ball.g3 { background: var(--g3); } .az-freq-ball.g4 { background: var(--g4); } .az-freq-ball.g5 { background: var(--g5); } /* ── 그리드 뷰 ── */ .az-legend { display: flex; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; } .az-leg-item { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--az-sub); } .az-leg-dot { width: 12px; height: 12px; border-radius: 50%; background: #e2e8f0; flex-shrink: 0; } .az-leg-dot.wn { background: #0033ff; } .az-leg-dot.bn { background: rgba(255,191,5,.25); outline: 1.5px solid #FFBF05; } /* 미선택 구간 강조 토글 버튼 */ .az-highlight-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 700; background: #fff; border: 1.5px solid var(--az-line); color: var(--az-sub); cursor: pointer; transition: color .15s, border-color .15s, background .15s, box-shadow .15s; } .az-highlight-btn:hover { color: var(--az-navy); border-color: #cbd5e1; background: var(--az-bg); } .az-highlight-btn.on { color: #fff; border-color: transparent; background: linear-gradient(90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #007aff, #af52de); box-shadow: 0 3px 12px rgba(15,39,68,.25); } /* 미선택(미출현) 강조 — 당첨/보너스 원형 점과 헷갈리지 않도록 원이 아니라 작대기(막대) 모양으로 바꾸고, 번호(1~45)마다 무지개 색상환을 고르게 입혀서 어떤 번호가 안 나왔는지 한눈에 보이게 함 */ .az-grid.is-highlight .az-dot:not(.wn):not(.bn) { width: 5px; height: 16px; border-radius: 2px; background: hsl(var(--h, 0), 85%, 55%); } .az-grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .az-grid-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 0; font-size: 11px; font-weight: 700; color: var(--az-sub); border-bottom: 2px solid var(--az-line); min-width: 680px; } .az-gh-no { width: 44px; flex-shrink: 0; text-align: right; } .az-gh-range { flex: 1; text-align: center; } .az-gh-date { width: 58px; flex-shrink: 0; text-align: right; } .az-grid { display: flex; flex-direction: column; } .az-grid-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--az-line); min-width: 680px; transition: background .1s; } .az-grid-row:hover { background: var(--az-bg); } .az-row-no { width: 44px; flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--az-sub); text-align: right; } .az-dots { flex: 1; display: flex; gap: 2px; align-items: center; } .az-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: #f0f4f8; } .az-dot.wn.g1 { background: var(--g1); } .az-dot.wn.g2 { background: var(--g2); } .az-dot.wn.g3 { background: var(--g3); } .az-dot.wn.g4 { background: var(--g4); } .az-dot.wn.g5 { background: var(--g5); } .az-dot.bn.g1 { background: rgba(255,191,5,.22); outline: 1.5px solid var(--g1); } .az-dot.bn.g2 { background: rgba(0,51,255,.18); outline: 1.5px solid var(--g2); } .az-dot.bn.g3 { background: rgba(255,0,0,.18); outline: 1.5px solid var(--g3); } .az-dot.bn.g4 { background: rgba(68,68,68,.15); outline: 1.5px solid var(--g4); } .az-dot.bn.g5 { background: rgba(1,223,58,.18); outline: 1.5px solid var(--g5); } .az-row-date { width: 58px; flex-shrink: 0; font-size: 11px; color: #aab; text-align: right; } /* ── 카드 뷰 ── */ .az-cards { display: flex; flex-direction: column; gap: 8px; } .az-card { background: #fff; border: 1px solid var(--az-line); border-radius: 14px; padding: 14px 16px; transition: box-shadow .15s; } .az-card:hover { box-shadow: 0 2px 14px rgba(15,39,68,.08); } .az-card-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .az-card-no { font-size: 14px; font-weight: 900; color: var(--az-navy); } .az-card-date { font-size: 12px; color: var(--az-sub); font-weight: 600; } /* 볼 */ .az-card-balls { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; } .az-ball { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #fff; position: relative; overflow: hidden; flex-shrink: 0; } .az-ball.g1 { background: radial-gradient(circle at 38% 35%, #ffe066 0%, #FFBF05 55%, #b88000 100%); } .az-ball.g2 { background: radial-gradient(circle at 38% 35%, #6699ff 0%, #0033ff 55%, #001a99 100%); } .az-ball.g3 { background: radial-gradient(circle at 38% 35%, #ff6666 0%, #ff0000 55%, #990000 100%); } .az-ball.g4 { background: radial-gradient(circle at 38% 35%, #888 0%, #555 55%, #222 100%); } .az-ball.g5 { background: radial-gradient(circle at 38% 35%, #66ff99 0%, #01df3a 55%, #008c24 100%); } .az-ball-gloss { position: absolute; top: 4px; left: 7px; width: 46%; height: 35%; border-radius: 50%; background: rgba(255,255,255,.35); pointer-events: none; } .az-bns { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,.18); } .az-bns-sep { font-size: 14px; color: var(--az-sub); font-weight: 700; margin: 0 1px; } /* 패턴 칩 */ .az-card-stats { display: flex; gap: 5px; flex-wrap: wrap; } .az-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; background: var(--az-bg); border: 1px solid var(--az-line); color: var(--az-sub); padding: 3px 9px; border-radius: 50px; } .az-chip-sum.c-ok { background: #dcfce7; border-color: #bbf7d0; color: #15803d; } .az-chip-sum.c-lo { background: #fee2e2; border-color: #fecaca; color: #dc2626; } .az-chip-sum.c-hi { background: #fef3c7; border-color: #fde68a; color: #d97706; } .az-chip-consec { background: #ede9fe; border-color: #ddd6fe; color: #7c3aed; } /* 페이징 */ .az-paging { text-align: center; padding: 24px 0 0; } /* 모바일 */ @media(max-width:767px){ .az-header-title { font-size: 17px; } .az-summary { padding: 12px 14px; flex-direction: column; gap: 0; } .az-smi { padding: 10px 0; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--az-line); } .az-smi:last-child { border-bottom: none; padding-bottom: 0; } .az-smd { display: none; } .az-smi-freq { flex-direction: column; align-items: flex-start; } .az-smv { font-size: 14px; } .az-ball { width: 30px; height: 30px; font-size: 12px; } .az-tab { padding: 8px 14px; font-size: 13px; } } /* ============================================================ lotto/g/lottogo-my.php — 로또고 구매기록 ============================================================ */ #v-lotto-g-lottogo-my{ --gl-navy:#0f2744; --gl-blue:#1d4ed8; --gl-line:#e2e8f0; --gl-bg:#f8fafc; --gl-ink:#0f172a; --gl-sub:#64748b; --gl-g1:#FFBF05; --gl-g2:#0033ff; --gl-g3:#ff0000; --gl-g4:#333; --gl-g5:#01df3a; --gl-green:#16a34a; --gl-red:#dc2626; padding-bottom:40px; } .gl-ad-top{ margin:12px 0; border-radius:10px; overflow:hidden; } /* 종합기록 */ .glm-total{ background:#fff; border:1px solid var(--gl-line); border-radius:14px; padding:16px; margin:16px 0 12px; } .glm-total-title{ font-size:14px; font-weight:900; color:var(--gl-ink); margin-bottom:12px; } .glm-total-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } .glm-total-item{ background:var(--gl-bg); border:1px solid var(--gl-line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; } .glm-tl{ font-size:11px; color:var(--gl-sub); font-weight:700; } .glm-tv{ font-size:15px; font-weight:900; color:var(--gl-ink); } .glm-tv-win{ color:var(--gl-blue); } .glm-tv-lose{ color:var(--gl-red); } /* 필터 */ .glm-filter{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; } .glm-sel{ font-size:14px; font-weight:700; padding:9px 14px; border:1px solid var(--gl-line); border-radius:10px; background:#fff; color:var(--gl-ink); cursor:pointer; outline:none; flex:1; } /* 리스트 */ .glm-list{ display:flex; flex-direction:column; gap:10px; } .glm-item{ background:#fff; border:1px solid var(--gl-line); border-radius:14px; overflow:hidden; } .glm-item.is-win{ border-color:#fde68a; background:#fffef5; } .glm-item.is-lose{ opacity:.85; } /* 카드 헤더 */ .glm-item-head{ display:flex; align-items:center; gap:8px; padding:11px 15px; border-bottom:1px solid var(--gl-line); } .glm-round{ font-size:14px; font-weight:900; color:var(--gl-ink); } .glm-date{ font-size:12px; color:var(--gl-sub); flex:1; } .glm-badge{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; padding:3px 10px; border-radius:10px; } .glmb-win{ background:#dcfce7; color:#16a34a; border:1px solid #bbf7d0; } .glmb-lose{ background:#f1f5f9; color:var(--gl-sub); border:1px solid var(--gl-line); } .glmb-apply{ background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; } /* 추첨 vs 선택 */ .glm-vs-row{ display:flex; align-items:center; gap:12px; padding:14px 16px; flex-wrap:wrap; } .glm-vs-side{ display:flex; flex-direction:column; align-items:center; gap:6px; } .glm-vs-lbl{ font-size:11px; color:var(--gl-sub); font-weight:700; } .glm-ball{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900; color:#fff; position:relative; overflow:hidden; box-shadow:inset 0 -3px 7px rgba(0,0,0,.25), inset 0 2px 5px rgba(255,255,255,.2), 0 2px 5px rgba(0,0,0,.2); } .glm-ball::before{ content:""; position:absolute; pointer-events:none; top:4px; left:6px; width:48%; height:36%; background:radial-gradient(ellipse at center, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 100%); border-radius:50%; } .glm-ball-g1{ background:radial-gradient(circle at 38% 35%, #ffe04f, #FFBF05 60%, #c48b00); color:#5a3e00; } .glm-ball-g2{ background:radial-gradient(circle at 38% 35%, #5580ff, #0033ff 60%, #0020cc); } .glm-ball-g3{ background:radial-gradient(circle at 38% 35%, #ff5555, #ff0000 60%, #cc0000); } .glm-ball-g4{ background:radial-gradient(circle at 38% 35%, #666, #333 60%, #111); } .glm-ball-g5{ background:radial-gradient(circle at 38% 35%, #3eff7a, #01df3a 60%, #00a82c); color:#004d14; } .glm-vs-divider{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:18px; } .glm-vs-result{ font-size:20px; font-weight:900; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; } .glm-vs-ok{ background:#dcfce7; color:#16a34a; } .glm-vs-ng{ background:#fee2e2; color:#dc2626; } .glm-vs-info{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; } .glm-vs-go{ font-size:15px; font-weight:900; color:var(--gl-ink); } .glm-vs-go strong{ font-size:19px; color:var(--gl-navy); } .glm-vs-cost{ font-size:12px; color:var(--gl-sub); font-weight:700; } /* 정보 행 */ .glm-info-row{ display:flex; gap:0; padding:0 15px 12px; flex-wrap:wrap; border-top:1px solid var(--gl-line); margin-top:2px; } .glm-info-item{ display:flex; align-items:center; gap:6px; font-size:13px; padding:8px 10px 8px 0; margin-right:10px; border-right:1px solid var(--gl-line); } .glm-info-item:last-child{ border-right:none; } .glm-info-total{ font-size:14px; } .glm-il{ color:var(--gl-sub); font-weight:700; } .glm-iv{ color:var(--gl-ink); font-weight:800; } .glm-iv-win{ color:var(--gl-blue); } /* 페이징 */ .glm-paging{ padding:16px 0; text-align:center; } /* 빈 상태 */ .glm-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 0; gap:12px; } .glm-empty-icon{ font-size:48px; color:var(--gl-line); } .glm-empty-msg{ font-size:15px; color:var(--gl-sub); font-weight:700; margin:0; } .glm-cta{ display:inline-flex; align-items:center; gap:7px; background:var(--gl-navy); color:#fff !important; text-decoration:none !important; font-size:14px; font-weight:900; padding:12px 24px; border-radius:12px; } .glm-cta:hover{ background:var(--gl-blue); } @media(max-width:480px){ .glm-total-grid{ grid-template-columns:repeat(2,1fr); } .glm-info-item{ font-size:12px; } .glm-vs-info{ display:none; } } /* ============================================================ lotto/g/lottogo.php — 로또고 게임 진행 ============================================================ */ #v-lotto-g-lottogo{ --gl-navy:#0f2744; --gl-blue:#1d4ed8; --gl-line:#e2e8f0; --gl-bg:#f8fafc; --gl-ink:#0f172a; --gl-sub:#64748b; --gl-amber:#f59e0b; --gl-green:#16a34a; --gl-red:#dc2626; --gl-g1:#FFBF05; --gl-g2:#0033ff; --gl-g3:#ff0000; --gl-g4:#333; --gl-g5:#01df3a; padding-bottom:40px; } #v-lotto-g-lottogo .bc{ font-size:13px; color:var(--gl-sub); margin:14px 0 0; line-height:2; } #v-lotto-g-lottogo .gl-page-h1{ font-size:13px; font-weight:700; color:var(--gl-sub); letter-spacing:-.01em; margin:0 0 10px; line-height:1.4; } /* 게스트(비로그인) 안내 화면 — 2026-09-21 */ #v-lotto-g-lottogo .gl-guest-h1{ font-size:22px; font-weight:900; color:var(--gl-ink); margin:14px 0 8px; } #v-lotto-g-lottogo .gl-guest-lead{ font-size:13.5px; color:var(--gl-sub); line-height:1.7; margin:0 0 20px; } #v-lotto-g-lottogo .gl-guest-rules{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; } #v-lotto-g-lottogo .gl-guest-rule{ flex:1 1 140px; background:var(--gl-bg); border:1px solid var(--gl-line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; } #v-lotto-g-lottogo .gl-guest-rule .k{ font-size:12px; font-weight:700; color:var(--gl-sub); display:flex; align-items:center; gap:6px; } #v-lotto-g-lottogo .gl-guest-rule .k i{ color:var(--gl-blue); } #v-lotto-g-lottogo .gl-guest-rule .v{ font-size:17px; font-weight:900; color:var(--gl-ink); } #v-lotto-g-lottogo .gl-guest-cta{ display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,var(--gl-navy),var(--gl-blue)); border-radius:16px; padding:20px 22px; margin-bottom:26px; flex-wrap:wrap; } #v-lotto-g-lottogo .gl-guest-cta .ico{ font-size:30px; color:#fff; opacity:.85; } #v-lotto-g-lottogo .gl-guest-cta .tx{ flex:1; min-width:180px; } #v-lotto-g-lottogo .gl-guest-cta .t1{ font-size:15px; font-weight:900; color:#fff; margin-bottom:3px; } #v-lotto-g-lottogo .gl-guest-cta .t2{ font-size:12.5px; color:rgba(255,255,255,.75); } #v-lotto-g-lottogo .gl-guest-cta-btn{ background:#fff; color:var(--gl-navy) !important; font-weight:800; font-size:13.5px; padding:11px 20px; border-radius:10px; text-decoration:none !important; white-space:nowrap; cursor:pointer; } #v-lotto-g-lottogo .gl-guest-faq-tit{ font-size:16px; font-weight:900; color:var(--gl-ink); margin:0 0 14px; } #v-lotto-g-lottogo .gl-guest-faq-item{ border-top:1px solid var(--gl-line); padding:14px 0; } #v-lotto-g-lottogo .gl-guest-faq-item .q{ font-size:13.5px; font-weight:800; color:var(--gl-ink); margin-bottom:6px; } #v-lotto-g-lottogo .gl-guest-faq-item .q::before{ content:'Q. '; color:var(--gl-blue); } #v-lotto-g-lottogo .gl-guest-faq-item .a{ font-size:13px; color:var(--gl-sub); line-height:1.7; } @media(max-width:480px){ #v-lotto-g-lottogo .gl-guest-cta{ flex-direction:column; align-items:stretch; text-align:center; } #v-lotto-g-lottogo .gl-guest-cta-btn{ text-align:center; } } .gl-ad-top{ margin:12px 0; border-radius:10px; overflow:hidden; } /* 히어로 */ .gl-hero{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; background:#fff; border:1px solid var(--gl-line); border-radius:14px; margin:16px 0 10px; } .gl-game-badge{ display:inline-flex; align-items:center; gap:6px; background:var(--gl-navy); color:#fff; font-size:13px; font-weight:900; padding:5px 12px; border-radius:20px; margin-bottom:4px; } .gl-round-label{ font-size:22px; font-weight:900; color:var(--gl-ink); } .gl-rp-label{ font-size:11px; color:var(--gl-sub); font-weight:700; text-align:right; } .gl-rp-value{ font-size:20px; font-weight:900; color:var(--gl-blue); } /* 진행 현황 카드 */ .gl-progress-card{ background:#fff; border:1px solid var(--gl-line); border-radius:14px; padding:16px 18px; margin-bottom:10px; } .gl-progress-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .gl-go-count{ font-size:15px; font-weight:700; color:var(--gl-ink); } .gl-go-count strong{ font-size:22px; font-weight:900; color:var(--gl-navy); margin-right:2px; } .gl-jackpot-badge{ display:inline-flex; align-items:center; gap:6px; background:#fef9c3; color:#a16207; border:1px solid #fde047; font-size:14px; font-weight:900; padding:5px 14px; border-radius:20px; } .gl-progress-pct{ font-size:13px; font-weight:800; color:var(--gl-sub); } .gl-progress-bar-wrap{ height:8px; background:#f1f5f9; border-radius:10px; overflow:hidden; margin-bottom:14px; } .gl-progress-bar{ height:100%; background:linear-gradient(90deg, #0f2744, #1d4ed8); border-radius:10px; transition:width .4s ease; min-width:4px; } .gl-stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .gl-stat-item{ background:var(--gl-bg); border:1px solid var(--gl-line); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:3px; } .gl-stat-total{ background:#eff6ff; border-color:#bfdbfe; } .gl-stat-lbl{ font-size:11px; color:var(--gl-sub); font-weight:700; } .gl-stat-val{ font-size:13px; font-weight:900; color:var(--gl-ink); } .gl-val-win{ color:var(--gl-green); } .gl-val-blue{ color:var(--gl-blue); } /* 아코디언 */ .gl-accordion{ background:#fff; border:1px solid var(--gl-line); border-radius:12px; overflow:hidden; margin-bottom:10px; } .gl-acc-toggle{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:none; border:none; cursor:pointer; font-size:14px; font-weight:800; color:var(--gl-ink); } .gl-acc-toggle span{ display:flex; align-items:center; gap:7px; } .gl-acc-icon{ color:var(--gl-sub); transition:transform .2s; } .gl-acc-toggle.open .gl-acc-icon{ transform:rotate(180deg); } .gl-acc-body{ padding:0 18px 18px; } .gl-acc-section{ margin-bottom:14px; } .gl-acc-section:last-child{ margin-bottom:0; } .gl-acc-title{ font-size:11px; font-weight:800; color:var(--gl-sub); letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; } .gl-acc-list{ padding-left:18px; margin:0; display:flex; flex-direction:column; gap:5px; } .gl-acc-list li{ font-size:13px; color:#475569; line-height:1.5; } .gl-acc-notice{ font-size:12px; color:var(--gl-sub); margin:6px 0 0; } /* 게임 시작 카드 */ .gl-start-card{ background:#fff; border:1px solid var(--gl-line); border-radius:14px; padding:24px 20px; display:flex; flex-direction:column; gap:16px; } .gl-start-info{ display:flex; align-items:center; gap:14px; } .gl-start-icon{ font-size:40px; color:#cbd5e1; } .gl-start-title{ font-size:17px; font-weight:900; color:var(--gl-ink); margin:0 0 4px; } .gl-start-desc{ font-size:13px; color:var(--gl-sub); margin:0; } .gl-notice-card{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:12px; font-size:14px; font-weight:700; } .gl-notice-warn{ background:#fef3c7; color:#92400e; border:1px solid #fde68a; } .gl-start-btn{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:16px; border:none; border-radius:12px; background:var(--gl-navy); color:#fff; font-size:17px; font-weight:900; cursor:pointer; transition:background .13s; } .gl-start-btn:hover{ background:var(--gl-blue); } /* 번호 그리드 */ .gl-pick-section{ background:#fff; border:1px solid var(--gl-line); border-radius:14px; padding:16px; margin-bottom:10px; } .gl-pick-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .gl-pick-title{ font-size:14px; font-weight:900; color:var(--gl-ink); } .gl-pick-hint{ font-size:12px; color:var(--gl-sub); background:var(--gl-bg); padding:4px 10px; border-radius:10px; border:1px solid var(--gl-line); } .gl-pick-legend{ display:flex; gap:14px; margin-bottom:12px; } .gl-legend-item{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--gl-sub); font-weight:600; } .gl-legend-dot{ width:12px; height:12px; border-radius:50%; display:inline-block; } .gl-ld-normal{ background:var(--gl-g2); } .gl-ld-used{ background:#cbd5e1; } .gl-num-grid{ display:grid; grid-template-columns:repeat(9,1fr); gap:4px; } .gl-num-label{ position:relative; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:center; padding:5px; } .gl-num-label input{ position:absolute; opacity:0; width:0; height:0; } .gl-num-ball{ width:44px; height:44px; flex-shrink:0; border-radius:50%; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900; color:#fff; letter-spacing:-.5px; box-shadow:inset 0 -4px 8px rgba(0,0,0,.28), inset 0 3px 6px rgba(255,255,255,.22), 0 2px 5px rgba(0,0,0,.22); transition:transform .13s, box-shadow .13s, filter .13s; } .gl-num-ball::before{ content:""; position:absolute; pointer-events:none; top:5px; left:8px; width:48%; height:36%; background:radial-gradient(ellipse at center, rgba(255,255,255,.52) 0%, rgba(255,255,255,0) 100%); border-radius:50%; } .gl-num-label.lg1 .gl-num-ball{ background:radial-gradient(circle at 38% 35%, #ffe04f, #FFBF05 60%, #c48b00); color:#5a3e00; } .gl-num-label.lg2 .gl-num-ball{ background:radial-gradient(circle at 38% 35%, #5580ff, #0033ff 60%, #0020cc); } .gl-num-label.lg3 .gl-num-ball{ background:radial-gradient(circle at 38% 35%, #ff5555, #ff0000 60%, #cc0000); } .gl-num-label.lg4 .gl-num-ball{ background:radial-gradient(circle at 38% 35%, #666, #333 60%, #111); } .gl-num-label.lg5 .gl-num-ball{ background:radial-gradient(circle at 38% 35%, #3eff7a, #01df3a 60%, #00a82c); color:#004d14; } /* 사용된 번호 */ .gl-num-label.is-used{ cursor:not-allowed; opacity:.38; } .gl-num-label.is-used .gl-num-ball{ background:radial-gradient(circle at 38% 35%, #e2e8f0, #cbd5e1 60%, #94a3b8) !important; color:#94a3b8 !important; box-shadow:none; } .gl-num-label.is-used .gl-num-ball::before{ display:none; } .gl-num-label.is-used:hover .gl-num-ball{ transform:none; filter:none; } /* hover & selected */ .gl-num-label:not(.is-used):hover .gl-num-ball{ transform:scale(1.1); filter:brightness(1.08); } .gl-num-label input:checked + .gl-num-ball{ transform:scale(1.15); box-shadow:inset 0 -4px 8px rgba(0,0,0,.3), inset 0 3px 6px rgba(255,255,255,.2), 0 0 0 2px #fff, 0 0 0 5px var(--gl-amber), 0 4px 14px rgba(245,158,11,.5); filter:brightness(1.12) saturate(1.1); } /* 선택 번호 미리보기 */ .gl-pick-preview{ background:#fff; border:1px solid var(--gl-line); border-radius:12px; padding:12px 16px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .gl-preview-left{ display:flex; align-items:center; gap:10px; } .gl-preview-lbl{ font-size:12px; font-weight:700; color:var(--gl-sub); } .gl-preview-ball{ width:38px; height:38px; border-radius:50%; overflow:hidden; position:relative; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; color:#fff; box-shadow:inset 0 -3px 7px rgba(0,0,0,.25), 0 2px 5px rgba(0,0,0,.2); } .gl-preview-ball.lg1{ background:radial-gradient(circle at 38% 35%, #ffe04f, #FFBF05 60%, #c48b00); color:#5a3e00; } .gl-preview-ball.lg2{ background:radial-gradient(circle at 38% 35%, #5580ff, #0033ff 60%, #0020cc); } .gl-preview-ball.lg3{ background:radial-gradient(circle at 38% 35%, #ff5555, #ff0000 60%, #cc0000); } .gl-preview-ball.lg4{ background:radial-gradient(circle at 38% 35%, #666, #333 60%, #111); } .gl-preview-ball.lg5{ background:radial-gradient(circle at 38% 35%, #3eff7a, #01df3a 60%, #00a82c); color:#004d14; } .gl-preview-hint{ font-size:11px; color:#94a3b8; } /* 로또고 성공 카드 */ .gl-jackpot-card{ background:linear-gradient(135deg, #fef9c3, #fffbeb); border:2px solid #fde047; border-radius:16px; padding:28px 20px; text-align:center; margin-bottom:10px; } .gl-jackpot-icon{ font-size:48px; margin-bottom:8px; } .gl-jackpot-title{ font-size:22px; font-weight:900; color:#a16207; margin:0 0 6px; } .gl-jackpot-desc{ font-size:14px; color:#92400e; margin:0; } /* 고/스탑 액션 바 */ .gl-action-bar{ display:flex; gap:10px; margin-top:4px; } .gl-btn-go{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 20px; border:none; border-radius:14px; background:#f59e0b; color:#fff; font-size:16px; font-weight:900; cursor:pointer; transition:background .13s, transform .1s; box-shadow:0 4px 14px rgba(245,158,11,.4); } .gl-btn-go:not([disabled]):hover{ background:#d97706; transform:translateY(-1px); } .gl-btn-go[disabled]{ background:#cbd5e1; color:#fff; cursor:not-allowed; box-shadow:none; } .gl-btn-cost{ font-size:12px; font-weight:700; opacity:.8; } .gl-btn-stop{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 20px; border:none; border-radius:14px; background:var(--gl-navy); color:#fff; font-size:16px; font-weight:900; cursor:pointer; transition:background .13s, transform .1s; } .gl-btn-stop:hover{ background:var(--gl-blue); transform:translateY(-1px); } .gl-btn-rp{ font-size:13px; font-weight:800; opacity:.9; } /* 반응형 */ @media(max-width:767px){ .gl-stats-row{ grid-template-columns:repeat(3,1fr); } .gl-num-grid{ gap:3px; } .gl-num-label{ display:block; padding:2px; } .gl-num-ball{ width:100%; height:auto; aspect-ratio:1/1; font-size:11px; } .gl-action-bar{ flex-direction:column; } } @media(max-width:480px){ .gl-num-grid{ gap:2px; } .gl-num-ball{ font-size:10px; } .gl-stats-row{ grid-template-columns:repeat(1,1fr); } } /* ============================================================ lotto/g/threetto-my.php — 쓰리또 구매기록 ============================================================ */ #v-lotto-g-threetto-my{ --gt-navy:#0f2744; --gt-blue:#1d4ed8; --gt-line:#e2e8f0; --gt-bg:#f8fafc; --gt-ink:#0f172a; --gt-sub:#64748b; --gt-g1:#FFBF05; --gt-g2:#0033ff; --gt-g3:#ff0000; --gt-g4:#333; --gt-g5:#01df3a; --gt-green:#16a34a; --gt-red:#dc2626; padding-bottom:40px; } .gt-ad-top{ margin:12px 0; border-radius:10px; overflow:hidden; } /* 종합기록 */ .gm-total{ background:#fff; border:1px solid var(--gt-line); border-radius:14px; padding:16px; margin:16px 0 12px; } .gm-total-title{ font-size:14px; font-weight:900; color:var(--gt-ink); margin-bottom:12px; } .gm-total-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } .gm-total-item{ background:var(--gt-bg); border:1px solid var(--gt-line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; } .gm-tl{ font-size:11px; color:var(--gt-sub); font-weight:700; } .gm-tv{ font-size:15px; font-weight:900; color:var(--gt-ink); } .gm-tv-win{ color:var(--gt-blue); } .gm-tv-lose{ color:var(--gt-red); } /* 필터 */ .gm-filter{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; } .gm-sel{ font-size:14px; font-weight:700; padding:9px 14px; border:1px solid var(--gt-line); border-radius:10px; background:#fff; color:var(--gt-ink); cursor:pointer; outline:none; flex:1; } /* 리스트 */ .gm-list{ display:flex; flex-direction:column; gap:10px; } /* 카드 */ .gm-item{ background:#fff; border:1px solid var(--gt-line); border-radius:14px; overflow:hidden; } .gm-item.is-win{ border-color:#fde68a; background:#fffef5; } .gm-item.is-lose{ opacity:.85; } /* 카드 헤더 */ .gm-item-head{ display:flex; align-items:center; gap:8px; padding:11px 15px; border-bottom:1px solid var(--gt-line); } .gm-round{ font-size:14px; font-weight:900; color:var(--gt-ink); } .gm-date{ font-size:12px; color:var(--gt-sub); flex:1; } .gm-badge{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:800; padding:3px 10px; border-radius:10px; } .gm-badge-pending{ background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; } .gm-badge-r1{ background:#fef9c3; color:#a16207; border:1px solid #fde047; } .gm-badge-r2{ background:#f1f5f9; color:#0f172a; border:1px solid var(--gt-line); } .gm-badge-r3{ background:#fef2f2; color:#991b1b; border:1px solid #fca5a5; } .gm-badge-lose{ background:#f8fafc; color:var(--gt-sub); border:1px solid var(--gt-line); } /* 공 행 */ .gm-balls-row{ display:flex; align-items:center; gap:8px; padding:12px 15px; flex-wrap:wrap; } .gm-balls-lbl{ font-size:11px; color:var(--gt-sub); font-weight:700; white-space:nowrap; } .gm-balls-sep{ color:var(--gt-sub); font-size:13px; } .gm-balls{ display:flex; gap:5px; } .gm-ball{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); position:relative; } .gm-ball-g1{ background:var(--gt-g1); color:#5a3e00; } .gm-ball-g2{ background:var(--gt-g2); } .gm-ball-g3{ background:var(--gt-g3); } .gm-ball-g4{ background:var(--gt-g4); } .gm-ball-g5{ background:var(--gt-g5); color:#004d14; } .gm-ball-hit{ box-shadow:0 0 0 3px #f59e0b, 0 1px 6px rgba(245,158,11,.4); } /* 정보 행 */ .gm-info-row{ display:flex; gap:0; padding:0 15px 12px; flex-wrap:wrap; border-top:1px solid var(--gt-line); margin-top:2px; } .gm-info-item{ display:flex; align-items:center; gap:6px; padding:8px 10px 8px 0; margin-right:10px; border-right:1px solid var(--gt-line); font-size:13px; } .gm-info-item:last-child{ border-right:none; } .gm-info-total{ font-size:14px; } .gm-il{ color:var(--gt-sub); font-weight:700; } .gm-iv{ color:var(--gt-ink); font-weight:800; } .gm-iv-win{ color:var(--gt-blue); } /* 페이징 */ .gm-paging{ padding:16px 0; text-align:center; } /* 빈 상태 */ .gm-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 0; gap:12px; } .gm-empty-icon{ font-size:48px; color:var(--gt-line); } .gm-empty-msg{ font-size:15px; color:var(--gt-sub); font-weight:700; margin:0; } .gm-cta{ display:inline-flex; align-items:center; gap:7px; background:var(--gt-navy); color:#fff !important; text-decoration:none !important; font-size:14px; font-weight:900; padding:12px 24px; border-radius:12px; } .gm-cta:hover{ background:var(--gt-blue); } @media(max-width:480px){ .gm-total-grid{ grid-template-columns:repeat(2,1fr); } .gm-info-row{ gap:0; } .gm-info-item{ font-size:12px; } } /* ============================================================ lotto/g/threetto.php — 쓰리또 게임 진행 ============================================================ */ #v-lotto-g-threetto{ --gt-navy:#0f2744; --gt-blue:#1d4ed8; --gt-line:#e2e8f0; --gt-bg:#f8fafc; --gt-ink:#0f172a; --gt-sub:#64748b; --gt-amber:#f59e0b; --gt-amber-s:#fffbeb; --gt-green:#16a34a; --gt-red:#dc2626; --gt-g1:#FFBF05; --gt-g2:#0033ff; --gt-g3:#ff0000; --gt-g4:#333; --gt-g5:#01df3a; padding-bottom:40px; } #v-lotto-g-threetto .bc{ font-size:13px; color:var(--gt-sub); margin:14px 0 0; line-height:2; } #v-lotto-g-threetto .gt-page-h1{ font-size:13px; font-weight:700; color:var(--gt-sub); letter-spacing:-.01em; margin:0 0 10px; line-height:1.4; } /* 게스트(비로그인) 안내 화면 — 2026-09-21 */ #v-lotto-g-threetto .gt-guest-h1{ font-size:22px; font-weight:900; color:var(--gt-ink); margin:14px 0 8px; } #v-lotto-g-threetto .gt-guest-lead{ font-size:13.5px; color:var(--gt-sub); line-height:1.7; margin:0 0 20px; } #v-lotto-g-threetto .gt-guest-rules{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; } #v-lotto-g-threetto .gt-guest-rule{ flex:1 1 140px; background:var(--gt-bg); border:1px solid var(--gt-line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; } #v-lotto-g-threetto .gt-guest-rule .k{ font-size:12px; font-weight:700; color:var(--gt-sub); display:flex; align-items:center; gap:6px; } #v-lotto-g-threetto .gt-guest-rule .k i{ color:var(--gt-blue); } #v-lotto-g-threetto .gt-guest-rule .v{ font-size:17px; font-weight:900; color:var(--gt-ink); } #v-lotto-g-threetto .gt-guest-cta{ display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,var(--gt-navy),var(--gt-blue)); border-radius:16px; padding:20px 22px; margin-bottom:26px; flex-wrap:wrap; } #v-lotto-g-threetto .gt-guest-cta .ico{ font-size:30px; color:#fff; opacity:.85; } #v-lotto-g-threetto .gt-guest-cta .tx{ flex:1; min-width:180px; } #v-lotto-g-threetto .gt-guest-cta .t1{ font-size:15px; font-weight:900; color:#fff; margin-bottom:3px; } #v-lotto-g-threetto .gt-guest-cta .t2{ font-size:12.5px; color:rgba(255,255,255,.75); } #v-lotto-g-threetto .gt-guest-cta-btn{ background:#fff; color:var(--gt-navy) !important; font-weight:800; font-size:13.5px; padding:11px 20px; border-radius:10px; text-decoration:none !important; white-space:nowrap; cursor:pointer; } #v-lotto-g-threetto .gt-guest-faq-tit{ font-size:16px; font-weight:900; color:var(--gt-ink); margin:0 0 14px; } #v-lotto-g-threetto .gt-guest-faq-item{ border-top:1px solid var(--gt-line); padding:14px 0; } #v-lotto-g-threetto .gt-guest-faq-item .q{ font-size:13.5px; font-weight:800; color:var(--gt-ink); margin-bottom:6px; } #v-lotto-g-threetto .gt-guest-faq-item .q::before{ content:'Q. '; color:var(--gt-blue); } #v-lotto-g-threetto .gt-guest-faq-item .a{ font-size:13px; color:var(--gt-sub); line-height:1.7; } @media(max-width:480px){ #v-lotto-g-threetto .gt-guest-cta{ flex-direction:column; align-items:stretch; text-align:center; } #v-lotto-g-threetto .gt-guest-cta-btn{ text-align:center; } } /* 카카오 광고 */ .gt-ad-top{ margin:12px 0; border-radius:10px; overflow:hidden; } /* 히어로 */ .gt-hero{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; background:#fff; border:1px solid var(--gt-line); border-radius:14px; margin:16px 0 10px; } .gt-game-badge{ display:inline-flex; align-items:center; gap:6px; background:var(--gt-navy); color:#fff; font-size:13px; font-weight:900; padding:5px 12px; border-radius:20px; margin-bottom:4px; } .gt-round-label{ font-size:22px; font-weight:900; color:var(--gt-ink); } .gt-rp-label{ font-size:11px; color:var(--gt-sub); font-weight:700; text-align:right; } .gt-rp-value{ font-size:20px; font-weight:900; color:var(--gt-blue); } /* 현황 */ .gt-stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; } .gt-stat-item{ background:#fff; border:1px solid var(--gt-line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; } .gt-stat-lbl{ font-size:11px; color:var(--gt-sub); font-weight:700; } .gt-stat-val{ font-size:14px; font-weight:900; color:var(--gt-ink); } .gt-prize{ color:var(--gt-blue) !important; } /* 배지 */ .gt-badge{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; padding:3px 8px; border-radius:10px; } .gt-badge-green{ background:#dcfce7; color:var(--gt-green); } .gt-badge-amber{ background:#fef3c7; color:#d97706; } .gt-badge-red{ background:#fee2e2; color:var(--gt-red); } .gt-timer.this-result{ color:var(--gt-red); } .gt-timer.this-apply{ color:#d97706; font-weight:900; } /* 아코디언 */ .gt-accordion{ background:#fff; border:1px solid var(--gt-line); border-radius:12px; overflow:hidden; margin-bottom:14px; } .gt-acc-toggle{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:none; border:none; cursor:pointer; font-size:14px; font-weight:800; color:var(--gt-ink); } .gt-acc-toggle span{ display:flex; align-items:center; gap:7px; } .gt-acc-toggle i{ color:var(--gt-sub); } .gt-acc-icon{ transition:transform .2s; } .gt-acc-toggle.open .gt-acc-icon{ transform:rotate(180deg); } .gt-acc-body{ padding:0 18px 18px; } .gt-acc-section{ margin-bottom:14px; } .gt-acc-section:last-child{ margin-bottom:0; } .gt-acc-title{ font-size:12px; font-weight:800; color:var(--gt-sub); letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; } .gt-acc-list{ padding-left:18px; margin:0; display:flex; flex-direction:column; gap:5px; } .gt-acc-list li{ font-size:13px; color:#475569; line-height:1.5; } .gt-acc-notice{ font-size:12px; color:var(--gt-sub); margin:8px 0 0; } .gt-prize-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:8px; } .gt-prize-item{ border-radius:10px; padding:12px 10px; text-align:center; } .gt-prize-1{ background:#fef9c3; border:1px solid #fde047; } .gt-prize-2{ background:#f1f5f9; border:1px solid #cbd5e1; } .gt-prize-3{ background:#fef2f2; border:1px solid #fca5a5; } .gt-prize-rank{ font-size:14px; font-weight:900; color:var(--gt-ink); } .gt-prize-cond{ font-size:11px; color:var(--gt-sub); margin:2px 0 6px; } .gt-prize-rp{ font-size:12px; font-weight:800; color:var(--gt-blue); } /* 안내 카드 */ .gt-notice-card{ display:flex; align-items:center; gap:10px; padding:16px 20px; border-radius:12px; font-size:14px; font-weight:700; margin:14px 0; } .gt-notice-warn{ background:#fef3c7; color:#92400e; border:1px solid #fde68a; } .gt-notice-closed{ background:#f1f5f9; color:#475569; border:1px solid var(--gt-line); } /* 결과 버튼 */ .gt-result-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:16px; border:none; border-radius:14px; background:var(--gt-navy); color:#fff; font-size:16px; font-weight:900; cursor:pointer; transition:background .13s; margin-bottom:14px; } .gt-result-btn:hover{ background:var(--gt-blue); } /* 번호 선택 */ .gt-pick-section{ background:#fff; border:1px solid var(--gt-line); border-radius:14px; padding:16px; margin-bottom:12px; } .gt-pick-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .gt-pick-title{ font-size:14px; font-weight:900; color:var(--gt-ink); } .gt-pick-hint{ font-size:12px; color:var(--gt-sub); background:var(--gt-bg); padding:4px 10px; border-radius:10px; border:1px solid var(--gt-line); } .gt-num-grid{ display:grid; grid-template-columns:repeat(9,1fr); gap:4px; } .gt-num-label{ position:relative; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:center; padding:5px; } .gt-num-label input{ position:absolute; opacity:0; width:0; height:0; } .gt-num-ball{ width:44px; height:44px; flex-shrink:0; border-radius:50%; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900; color:#fff; letter-spacing:-.5px; box-shadow:inset 0 -4px 8px rgba(0,0,0,.28), inset 0 3px 6px rgba(255,255,255,.22), 0 2px 5px rgba(0,0,0,.22); transition:transform .13s, box-shadow .13s, filter .13s; } /* 상단 광택 */ .gt-num-ball::before{ content:""; position:absolute; pointer-events:none; top:5px; left:8px; width:48%; height:36%; background:radial-gradient(ellipse at center, rgba(255,255,255,.52) 0%, rgba(255,255,255,0) 100%); border-radius:50%; } .gt-num-label.lg1 .gt-num-ball{ background:radial-gradient(circle at 38% 35%, #ffe04f, #FFBF05 60%, #c48b00); color:#5a3e00; } .gt-num-label.lg2 .gt-num-ball{ background:radial-gradient(circle at 38% 35%, #5580ff, #0033ff 60%, #0020cc); } .gt-num-label.lg3 .gt-num-ball{ background:radial-gradient(circle at 38% 35%, #ff5555, #ff0000 60%, #cc0000); } .gt-num-label.lg4 .gt-num-ball{ background:radial-gradient(circle at 38% 35%, #666, #333 60%, #111); } .gt-num-label.lg5 .gt-num-ball{ background:radial-gradient(circle at 38% 35%, #3eff7a, #01df3a 60%, #00a82c); color:#004d14; } /* 호버 */ .gt-num-label:hover .gt-num-ball{ transform:scale(1.1); filter:brightness(1.08); } /* 선택됨: 흰 안쪽 링 + 앰버 바깥 링으로 어떤 색이든 뚜렷하게 */ .gt-num-label input:checked + .gt-num-ball{ transform:scale(1.15); box-shadow: inset 0 -4px 8px rgba(0,0,0,.3), inset 0 3px 6px rgba(255,255,255,.2), 0 0 0 2px #fff, 0 0 0 5px var(--gt-amber), 0 4px 14px rgba(245,158,11,.5); filter:brightness(1.12) saturate(1.1); } /* 선택 번호 미리보기 + 구매 */ .gt-buy-bar{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--gt-line); border-radius:14px; padding:14px 16px; } .gt-buy-left{ flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; } .gt-buy-label{ font-size:11px; font-weight:700; color:var(--gt-sub); } .gt-buy-count{ font-weight:900; color:var(--gt-navy); } .gt-selected-preview{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .gt-preview-empty{ font-size:13px; color:#94a3b8; display:flex; align-items:center; gap:6px; } .gt-preview-empty i{ font-size:12px; } .gt-preview-hint{ font-size:11px; color:var(--gt-sub); } .gt-preview-ball{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:14px; font-weight:900; color:#fff; position:relative; overflow:hidden; box-shadow:inset 0 -3px 7px rgba(0,0,0,.25), inset 0 2px 5px rgba(255,255,255,.2), 0 2px 6px rgba(0,0,0,.2); transition:transform .12s, opacity .12s; } .gt-preview-ball::before{ content:""; position:absolute; pointer-events:none; top:4px; left:7px; width:48%; height:36%; background:radial-gradient(ellipse at center, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 100%); border-radius:50%; } .gt-preview-ball:hover{ transform:scale(1.08); opacity:.8; } .gt-preview-ball:hover::after{ content:"\00d7"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; color:#fff; background:rgba(0,0,0,.35); border-radius:50%; } .gt-preview-ball.lg1{ background:radial-gradient(circle at 38% 35%, #ffe04f, #FFBF05 60%, #c48b00); color:#5a3e00; } .gt-preview-ball.lg2{ background:radial-gradient(circle at 38% 35%, #5580ff, #0033ff 60%, #0020cc); } .gt-preview-ball.lg3{ background:radial-gradient(circle at 38% 35%, #ff5555, #ff0000 60%, #cc0000); } .gt-preview-ball.lg4{ background:radial-gradient(circle at 38% 35%, #666, #333 60%, #111); } .gt-preview-ball.lg5{ background:radial-gradient(circle at 38% 35%, #3eff7a, #01df3a 60%, #00a82c); color:#004d14; } .gt-buy-btn{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; background:#cbd5e1; color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:900; padding:13px 20px; cursor:not-allowed; transition:background .13s; flex-shrink:0; } .gt-buy-btn:not([disabled]){ background:var(--gt-navy); cursor:pointer; } .gt-buy-btn:not([disabled]):hover{ background:var(--gt-blue); } /* 반응형 */ @media(max-width:767px){ .gt-stats-row{ grid-template-columns:repeat(2,1fr); } .gt-num-grid{ gap:3px; } .gt-num-label{ display:block; padding:2px; } .gt-num-ball{ width:100%; height:auto; aspect-ratio:1/1; font-size:11px; } .gt-buy-bar{ flex-direction:column; align-items:stretch; } .gt-buy-btn{ width:100%; justify-content:center; padding:16px; font-size:16px; } .gt-prize-grid{ grid-template-columns:repeat(3,1fr); } } @media(max-width:480px){ .gt-num-grid{ gap:2px; } .gt-num-ball{ font-size:10px; } } /* ============================================================ lotto/s/status.php — 번호별 출현 통계 ============================================================ */ #v-lotto-s-status{ --ss-navy:#0f2744; --ss-blue:#1d4ed8; --ss-blue-s:#eff6ff; --ss-ink:#0f172a; --ss-sub:#64748b; --ss-line:#e2e8f0; --ss-bg:#f8fafc; overflow:hidden; margin-bottom:64px; padding:0 2%; box-sizing:border-box; } /* 헤더 */ #v-lotto-s-status h1.ss-tit{ font-size:21px; font-weight:900; font-family:'Noto Sans KR',sans-serif; margin:12px 0 4px; color:var(--ss-ink); } #v-lotto-s-status h1.ss-tit i{ color:var(--ss-blue); margin-right:6px; } #v-lotto-s-status .ss-lead{ color:var(--ss-sub); font-size:13px; line-height:21px; margin:0 0 14px; } /* 필터 카드 */ #v-lotto-s-status .ss-filter{ background:#fff; border:solid 1px var(--ss-line); border-radius:14px; padding:16px 18px; margin-bottom:18px; box-shadow:0 2px 10px rgba(15,23,42,.05); } #v-lotto-s-status .ss-filter-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px; } #v-lotto-s-status .ss-filter-row:last-child{ margin-bottom:0; } #v-lotto-s-status .ss-field{ flex:1; min-width:150px; } #v-lotto-s-status .ss-field-label{ font-size:11px; font-weight:700; color:var(--ss-sub); text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px; } #v-lotto-s-status .ss-chips{ display:flex; flex-wrap:wrap; gap:6px; } #v-lotto-s-status .ss-chips label{ margin:0; } #v-lotto-s-status .ss-chips label input{ display:none; } #v-lotto-s-status .ss-chips label span{ display:inline-block; padding:6px 14px; border:solid 1px var(--ss-line); border-radius:50px; font-size:12px; font-weight:700; color:#555; background:#fff; cursor:pointer; transition:all .14s; } #v-lotto-s-status .ss-chips label input:checked + span{ background:var(--ss-navy); color:#fff; border-color:var(--ss-navy); } /* "기타" 직접입력 칩 + 숫자 입력창 */ #v-lotto-s-status .ss-chip-etc span{ border-style:dashed; color:var(--ss-navy); } #v-lotto-s-status .ss-chip-etc input:checked + span{ border-style:solid; } #v-lotto-s-status .ss-custom-box{ display:flex; align-items:center; gap:8px; margin-top:8px; } #v-lotto-s-status .ss-custom-input{ width:56px; height:32px; padding:0 10px; text-align:center; border:solid 1px var(--ss-line); border-radius:8px; font-size:13px; font-weight:700; color:var(--ss-ink); transition:border-color .14s, box-shadow .14s; } #v-lotto-s-status .ss-custom-input:focus{ outline:none; border-color:var(--ss-navy); box-shadow:0 0 0 3px rgba(15,39,68,.1); } #v-lotto-s-status .ss-custom-suffix{ font-size:11px; color:var(--ss-sub); } /* 기준 회차 — 가장 위 핵심 필터라 살짝 강조된 카드로 분리 */ #v-lotto-s-status .ss-field-round{ flex:0 0 100%; background:var(--ss-bg); border:solid 1px var(--ss-line); border-radius:12px; padding:12px 14px; } #v-lotto-s-status .ss-field-round .ss-field-label{ color:var(--ss-navy); font-size:12px; margin-bottom:9px; } #v-lotto-s-status .ss-field-round .ss-field-label i{ margin-right:4px; } /* select2를 사이트 톤(네이비/라운드)에 맞게 재도색 */ #v-lotto-s-status .select2-container--default .select2-selection--single{ height:40px; border:solid 1px var(--ss-line); border-radius:10px; background:#fff; transition:border-color .14s, box-shadow .14s; } #v-lotto-s-status .select2-container--default.select2-container--open .select2-selection--single, #v-lotto-s-status .select2-container--default .select2-selection--single:hover{ border-color:var(--ss-navy); } #v-lotto-s-status .select2-container--default.select2-container--focus .select2-selection--single{ border-color:var(--ss-navy); box-shadow:0 0 0 3px rgba(15,39,68,.1); } #v-lotto-s-status .select2-selection--single .select2-selection__rendered{ line-height:38px; padding-left:14px; padding-right:34px; font-size:13px; font-weight:700; color:var(--ss-ink); } #v-lotto-s-status .select2-selection--single .select2-selection__arrow{ height:38px; right:8px; } #v-lotto-s-status .select2-dropdown{ border:solid 1px var(--ss-line); border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(15,23,42,.12); } #v-lotto-s-status .select2-search--dropdown{ padding:8px; background:#fff; } #v-lotto-s-status .select2-search--dropdown .select2-search__field{ border:solid 1px var(--ss-line); border-radius:8px; padding:7px 10px; font-size:13px; } #v-lotto-s-status .select2-search--dropdown .select2-search__field:focus{ outline:none; border-color:var(--ss-navy); } #v-lotto-s-status .select2-results__option{ font-size:13px; padding:8px 14px; } #v-lotto-s-status .select2-results__option--highlighted[aria-selected]{ background:var(--ss-navy) !important; color:#fff !important; } #v-lotto-s-status .select2-results__option[aria-selected="true"]{ background:var(--ss-blue-s); color:var(--ss-navy); font-weight:700; } /* 번호 리스트 */ #v-lotto-s-status .ss-list{ background:#fff; border:solid 1px var(--ss-line); border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(15,23,42,.04); } #v-lotto-s-status .ss-item{ display:flex; align-items:center; gap:12px; padding:9px 16px; border-bottom:solid 1px #f1f4f8; transition:background .1s; } #v-lotto-s-status .ss-item:last-child{ border-bottom:none; } #v-lotto-s-status .ss-item:hover{ background:var(--ss-bg); } /* 볼 */ #v-lotto-s-status .ss-ball{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; font-size:13px; font-weight:900; color:#fff; font-family:'Noto Sans KR',sans-serif; } #v-lotto-s-status .ss-ball.g1{ background:#FFBF05; color:#333; box-shadow:0 2px 6px rgba(255,191,5,.35); } #v-lotto-s-status .ss-ball.g2{ background:#03F; box-shadow:0 2px 6px rgba(0,51,255,.25); } #v-lotto-s-status .ss-ball.g3{ background:#F00; box-shadow:0 2px 6px rgba(255,0,0,.25); } #v-lotto-s-status .ss-ball.g4{ background:#333; box-shadow:0 2px 6px rgba(51,51,51,.25); } #v-lotto-s-status .ss-ball.g5{ background:#01DF3A; color:#333; box-shadow:0 2px 6px rgba(1,223,58,.25); } /* 바 */ #v-lotto-s-status .ss-bar-wrap{ flex:1; height:8px; background:#f0f3f7; border-radius:4px; overflow:hidden; } #v-lotto-s-status .ss-bar{ height:100%; border-radius:4px; } #v-lotto-s-status .g1 .ss-bar{ background:#FFBF05; } #v-lotto-s-status .g2 .ss-bar{ background:#03F; } #v-lotto-s-status .g3 .ss-bar{ background:#F00; } #v-lotto-s-status .g4 .ss-bar{ background:#555; } #v-lotto-s-status .g5 .ss-bar{ background:#01DF3A; } #v-lotto-s-status .ss-count{ flex-shrink:0; width:50px; text-align:right; font-size:13px; font-weight:700; color:var(--ss-ink); font-family:'Noto Sans KR',sans-serif; } /* 빈 결과 */ #v-lotto-s-status .ss-empty{ text-align:center; padding:48px; color:#aaa; font-size:14px; background:#fafafa; border-radius:14px; border:dashed 1px var(--ss-line); } #v-lotto-s-status .ss-empty i{ font-size:36px; display:block; margin-bottom:10px; color:#ddd; } /* 모바일 */ @media (max-width:600px){ #v-lotto-s-status{ padding:0 14px; } #v-lotto-s-status .ss-filter{ padding:14px; } #v-lotto-s-status .ss-filter-row{ gap:10px; } #v-lotto-s-status .ss-field{ min-width:100%; } #v-lotto-s-status .ss-ball{ width:28px; height:28px; font-size:12px; } #v-lotto-s-status .ss-item{ padding:8px 12px; gap:9px; } #v-lotto-s-status .ss-count{ width:44px; font-size:12px; } } /* ============================================================ lotto/s/auto.php — 자동추첨 페이지 (sa-*) ============================================================ */ #v-lotto-s-auto{ --sa-navy:#0f2744; --sa-blue:#1d4ed8; --sa-blue-s:#eff6ff; --sa-line:#e2e8f0; --sa-bg:#f8fafc; --sa-ink:#0f172a; --sa-sub:#64748b; } /* 페이지 헤더 */ #v-lotto-s-auto .sa-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 0 14px; } #v-lotto-s-auto .sa-header-title{ display:flex; align-items:center; gap:10px; font-size:19px; font-weight:900; color:var(--sa-ink); } #v-lotto-s-auto .sa-header-h1{ margin:0; font:inherit; color:inherit; } /* h1이지만 기존 span 스타일 그대로 유지 */ #v-lotto-s-auto .sa-header-icon{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:var(--sa-blue-s); color:var(--sa-blue); font-size:15px; } #v-lotto-s-auto .sa-help-btn{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--sa-sub); text-decoration:none; border:1px solid var(--sa-line); border-radius:6px; padding:6px 12px; transition:background .14s,color .14s; } #v-lotto-s-auto .sa-help-btn:hover{ background:var(--sa-navy); color:#fff; border-color:var(--sa-navy); } /* 폼 */ #v-lotto-s-auto .sa-form{ display:flex; flex-direction:column; gap:10px; } /* 공통 카드 */ #v-lotto-s-auto .sa-card{ background:#fff; border:1px solid var(--sa-line); border-radius:12px; overflow:hidden; } /* 옵션 행 (기본: 세로 → PC: 가로) */ #v-lotto-s-auto .sa-options-row{ display:flex; flex-direction:column; gap:10px; } #v-lotto-s-auto .sa-nums-row{ display:flex; flex-direction:column; gap:10px; } /* 섹션 타이틀 */ #v-lotto-s-auto [class^="item-table"]{ margin:0 !important; } #v-lotto-s-auto [class^="item-table"] .title{ font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--sa-sub); background:var(--sa-bg); padding:10px 16px; border-bottom:1px solid var(--sa-line); border-radius:0; font-family:'Noto Sans KR',sans-serif; } #v-lotto-s-auto [class^="item-table"] .title i{ display:none; } /* 라디오 옵션 */ #v-lotto-s-auto [class^="item-table"] .option{ padding:14px 16px; display:flex; flex-wrap:wrap; gap:8px; margin:0; } #v-lotto-s-auto [class^="item-table"] .option label{ overflow:visible; display:inline; } #v-lotto-s-auto [class^="item-table"] .option label input{ display:none; } #v-lotto-s-auto [class^="item-table"] .option label input + .txt{ display:inline-flex; align-items:center; justify-content:center; min-width:52px; padding:8px 16px; border:1px solid var(--sa-line); border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; background:#fff; color:#374151; transition:all .14s; font-family:'Noto Sans KR',sans-serif; margin:0; } #v-lotto-s-auto [class^="item-table"] .option label input:checked + .txt{ background:var(--sa-navy); color:#fff; border-color:var(--sa-navy); } #v-lotto-s-auto .item-table-count .option label input + .txt{ min-width:44px; padding:8px 10px; } #v-lotto-s-auto .item-table-mode .option label input + .txt{ min-width:80px; } /* 번호 토글 버튼 */ #v-lotto-s-auto .item-table-num{ overflow:visible; } #v-lotto-s-auto .item-table-num .select{ padding:14px 16px; } #v-lotto-s-auto .item-table-num .select .btn{ display:flex; align-items:center; justify-content:space-between; width:100%; font-size:14px; font-weight:800; color:var(--sa-ink); background:var(--sa-bg); border:1px solid var(--sa-line); border-radius:8px; padding:12px 14px; text-decoration:none; transition:background .14s,border-color .14s; font-family:'Noto Sans KR',sans-serif; } #v-lotto-s-auto .item-table-num .select .btn i{ color:var(--sa-blue); margin-right:6px; } #v-lotto-s-auto .item-table-num .select .btn.on{ background:var(--sa-blue-s); border-color:#bfdbfe; color:var(--sa-blue); } #v-lotto-s-auto .sa-num-meta{ display:inline-flex; align-items:center; gap:6px; } #v-lotto-s-auto .sa-num-hint{ font-size:11px; font-weight:500; color:var(--sa-sub); } #v-lotto-s-auto .item-table-num .select .slt-count{ font-size:11px; font-weight:900; background:var(--sa-blue); color:#fff; padding:2px 8px; border-radius:50px; } #v-lotto-s-auto .item-table-num .select .btn.on .slt-count{ background:var(--sa-navy); } /* 번호 그리드 — !important 없이 (jQuery show/hide 정상 동작) */ #v-lotto-s-auto .item-table-num .select-list{ padding:14px 16px; border-top:1px solid var(--sa-bg); display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:auto; gap:6px; margin:0; } #v-lotto-s-auto .item-table-num .select-list label{ width:auto; } #v-lotto-s-auto .item-table-num .select-list label input{ display:none; } #v-lotto-s-auto .item-table-num .select-list label input + .txt{ display:inline-flex !important; align-items:center; justify-content:center; width:34px !important; height:34px !important; line-height:1 !important; border-radius:50% !important; border:1px solid var(--sa-line) !important; background:#f1f5f9 !important; color:#374151 !important; font-size:12px; font-weight:800; cursor:pointer; margin:0 !important; transition:all .12s; font-family:'Noto Sans KR',sans-serif; } /* 초기화 */ #v-lotto-s-auto .init-box{ padding:0 16px 14px; } #v-lotto-s-auto .init-box a{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--sa-sub); text-decoration:none; border:1px solid var(--sa-line); border-radius:6px; padding:5px 12px; background:#fff; transition:all .14s; } #v-lotto-s-auto .init-box a:hover{ background:var(--sa-bg); color:var(--sa-ink); } /* 고정/제외번호 저장·불러오기 (회원 전용) — 2026-08-29 */ #v-lotto-s-auto .save-load-box{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 16px 16px; border-top:1px dashed var(--sa-line); } #v-lotto-s-auto .save-load-box .sl-btn{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--sa-navy); text-decoration:none; border:1px solid var(--sa-line); border-radius:6px; padding:6px 13px; background:#fff; transition:all .14s; } #v-lotto-s-auto .save-load-box .sl-btn:hover{ background:var(--sa-navy); color:#fff; border-color:var(--sa-navy); } #v-lotto-s-auto .save-load-box .sl-promo{ display:inline-flex; align-items:center; gap:6px; width:100%; font-size:12px; font-weight:600; color:#b45309; text-decoration:none; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:8px 12px; transition:background .14s; } #v-lotto-s-auto .save-load-box .sl-promo:hover{ background:#fef3c7; } #v-lotto-s-auto .save-load-box .sl-promo i{ color:#d97706; } /* 제외번호 회원 혜택 배너 (비로그인) */ #v-lotto-s-auto .sa-dnum-promo-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fffbeb; border:1.5px solid #fde68a; border-radius:12px; padding:14px 16px; } #v-lotto-s-auto .sa-dnum-promo-left{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; } #v-lotto-s-auto .sa-dnum-promo-icon{ font-size:22px; color:#f59e0b; flex-shrink:0; } #v-lotto-s-auto .sa-dnum-promo-msg{ font-size:13px; color:var(--sa-ink); line-height:1.5; } #v-lotto-s-auto .sa-dnum-hl{ color:var(--sa-blue); font-size:14px; } #v-lotto-s-auto .sa-dnum-promo-sub{ font-size:11px; color:#92400e; margin-top:2px; } #v-lotto-s-auto .sa-dnum-promo-btn{ flex-shrink:0; padding:8px 16px; background:linear-gradient(135deg,#0f2744,#1d4ed8); color:#fff; border-radius:8px; font-size:12px; font-weight:800; text-decoration:none; transition:opacity .14s; white-space:nowrap; } #v-lotto-s-auto .sa-dnum-promo-btn:hover{ opacity:.88; color:#fff; } /* 제외번호 회원 혜택 배너 (로그인) */ #v-lotto-s-auto .sa-dnum-vip-banner{ display:flex; align-items:center; gap:10px; background:#f0fdf4; border:1.5px solid #6ee7b7; border-radius:12px; padding:12px 16px; font-size:13px; font-weight:600; color:#065f46; } #v-lotto-s-auto .sa-dnum-vip-banner i{ color:#10b981; font-size:17px; flex-shrink:0; } /* 제외분석 결과 */ #v-lotto-s-auto .ea-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--sa-bg); border-bottom:1px solid var(--sa-line); } #v-lotto-s-auto .ea-title{ font-size:11px; font-weight:800; color:var(--sa-sub); letter-spacing:.06em; display:flex; align-items:center; gap:6px; } #v-lotto-s-auto .ea-close-btn{ width:24px; height:24px; border-radius:50%; border:1px solid var(--sa-line); background:#fff; color:var(--sa-sub); cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center; padding:0; transition:all .14s; } #v-lotto-s-auto .ea-close-btn:hover{ background:#fee2e2; color:#ef4444; border-color:#fca5a5; } #v-lotto-s-auto #analysis-content{ padding:14px 16px; } /* 요약 통계 그리드 */ #v-lotto-s-auto .ea-summary-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px; } #v-lotto-s-auto .ea-stat-item{ background:var(--sa-bg); border:1px solid var(--sa-line); border-radius:10px; padding:10px 12px; text-align:center; } #v-lotto-s-auto .ea-stat-label{ font-size:10px; font-weight:700; color:var(--sa-sub); margin-bottom:4px; } #v-lotto-s-auto .ea-stat-value{ font-size:20px; font-weight:900; color:var(--sa-navy); line-height:1.2; } #v-lotto-s-auto .ea-stat-unit{ font-size:11px; color:var(--sa-sub); font-weight:500; } #v-lotto-s-auto .ea-stat-value.sm{ font-size:13px; } /* 섹션 레이블 */ #v-lotto-s-auto .ea-section-label{ font-size:11px; font-weight:800; color:var(--sa-sub); margin-bottom:8px; letter-spacing:.05em; } /* 번호 배지 */ #v-lotto-s-auto .ea-num-wrap{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; } #v-lotto-s-auto .ea-num-badge{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; font-size:11px; font-weight:900; flex-shrink:0; } #v-lotto-s-auto .ea-num-badge.g1{ background:#FFBF05; color:#5a4200; } #v-lotto-s-auto .ea-num-badge.g2{ background:#0033ff; color:#fff; } #v-lotto-s-auto .ea-num-badge.g3{ background:#ff0000; color:#fff; } #v-lotto-s-auto .ea-num-badge.g4{ background:#333; color:#fff; } #v-lotto-s-auto .ea-num-badge.g5{ background:#01df3a; color:#004d14; } /* 분석 방법별 */ #v-lotto-s-auto .ea-method-list{ display:flex; flex-direction:column; gap:8px; } #v-lotto-s-auto .ea-method-item{ background:var(--sa-bg); border:1px solid var(--sa-line); border-radius:10px; padding:10px 12px; } #v-lotto-s-auto .ea-method-name{ font-size:12px; font-weight:800; color:var(--sa-navy); margin-bottom:4px; } #v-lotto-s-auto .ea-method-desc{ font-size:11px; color:var(--sa-sub); margin-bottom:8px; line-height:1.5; } #v-lotto-s-auto .ea-method-nums{ display:flex; flex-wrap:wrap; gap:5px; } /* 액션 블록 (추첨버튼 + 광고) */ #v-lotto-s-auto .sa-action-block{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; } /* 추첨 버튼 — a.btn 으로 lotto.css specificity(121) 동일 + !important 로 max-width:240px 덮어쓰기 */ #v-lotto-s-auto .submit a.btn{ display:flex !important; align-items:center; justify-content:center; gap:14px; width:100% !important; max-width:100% !important; background:var(--sa-navy); color:#fff; border-radius:14px; padding:16px 24px; text-decoration:none; font-family:'Noto Sans KR',sans-serif; box-shadow:0 4px 18px rgba(15,39,68,.24); transition:background .18s, transform .12s, box-shadow .18s; } #v-lotto-s-auto .submit a.btn:hover{ background:var(--sa-blue); box-shadow:0 8px 28px rgba(29,78,216,.3); transform:translateY(-2px); } #v-lotto-s-auto .submit a.btn:active{ transform:translateY(0); } #v-lotto-s-auto .sa-btn-icon{ font-size:22px; flex-shrink:0; } #v-lotto-s-auto .sa-btn-body{ display:flex; flex-direction:column; text-align:left; } #v-lotto-s-auto .sa-btn-main{ font-size:17px; font-weight:900; letter-spacing:.01em; line-height:1.3; } #v-lotto-s-auto .sa-btn-sub{ font-size:11px; font-weight:500; color:rgba(255,255,255,.6); margin-top:2px; } /* 모바일 */ @media(max-width:480px){ #v-lotto-s-auto .item-table-num .select-list{ grid-template-columns:repeat(6,1fr); } #v-lotto-s-auto .item-table-num .select-list label input + .txt{ width:30px !important; height:30px !important; font-size:11px; } } /* PC 2열 레이아웃 */ @media(min-width:520px){ #v-lotto-s-auto .sa-options-row{ flex-direction:row; } #v-lotto-s-auto .sa-options-row .item-table-count{ flex:0 0 150px; } #v-lotto-s-auto .sa-options-row .item-table-mode{ flex:1; } #v-lotto-s-auto .sa-nums-row{ flex-direction:row; } #v-lotto-s-auto .sa-nums-row .item-table-num{ flex:1; } #v-lotto-s-auto .sa-nums-row .item-table-num .select-list{ grid-template-columns:repeat(5,1fr); } #v-lotto-s-auto .sa-action-block{ flex-direction:row; align-items:stretch; } #v-lotto-s-auto .sa-action-block .submit{ flex:1; display:flex; } #v-lotto-s-auto .sa-action-block .submit a.btn{ font-size:19px; padding:20px 24px; align-items:center; width:100% !important; } #v-lotto-s-auto .sa-btn-main{ font-size:19px; } } /* ══════════════════════════════ 추첨 애니메이션 (s/auto.php) — @keyframes(saModalIn/saSpin/saBallIn/saSpin2)는 위 rlog-info 섹션과 동일해 생략 ══════════════════════════════ */ #lotto-animation{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999; display:flex; align-items:center; justify-content:center; } .lotto-animation-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(15,39,68,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .lotto-animation-container{ position:relative; z-index:1; background:#fff; border-radius:20px; padding:36px 28px 28px; box-shadow:0 24px 60px rgba(0,0,0,.35); max-width:400px; width:88%; text-align:center; animation:saModalIn .3s cubic-bezier(.34,1.3,.64,1); } .sa-anim-badge{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:#eff6ff; color:#1d4ed8; font-size:20px; margin:0 auto 14px; animation:saSpin 1.8s linear infinite; } .lotto-animation-header h3{ font-size:20px; font-weight:900; color:#0f2744; margin:0 0 6px; } .lotto-animation-header p{ font-size:13px; color:#64748b; margin:0 0 4px; } .lotto-balls-container{ display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin:24px 0 20px; min-height:68px; } .lotto-ball-placeholder{ width:52px; height:52px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:17px; font-weight:900; background:#f1f5f9; color:#94a3b8; border:2px solid #e2e8f0; opacity:.3; transform:scale(.75); transition:opacity .2s,transform .2s; } .lotto-ball-placeholder.show{ opacity:1; transform:scale(1); animation:saBallIn .4s cubic-bezier(.34,1.56,.64,1); } .lotto-ball-placeholder.ball-1-10 { background:#FFBF05; border-color:#d9a400; color:#5a4200; box-shadow:0 4px 14px rgba(255,191,5,.4); } .lotto-ball-placeholder.ball-11-20{ background:#0033ff; border-color:#0026cc; color:#fff; box-shadow:0 4px 14px rgba(0,51,255,.35); } .lotto-ball-placeholder.ball-21-30{ background:#ff0000; border-color:#cc0000; color:#fff; box-shadow:0 4px 14px rgba(255,0,0,.35); } .lotto-ball-placeholder.ball-31-40{ background:#333333; border-color:#111; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.35); } .lotto-ball-placeholder.ball-41-45{ background:#01df3a; border-color:#00b02e; color:#004d14; box-shadow:0 4px 14px rgba(1,223,58,.35); } .lotto-animation-footer{ margin-top:4px; } .loading-spinner{ width:32px; height:32px; margin:0 auto; border:3px solid #e2e8f0; border-top-color:#1d4ed8; border-radius:50%; animation:saSpin2 .75s linear infinite; } /* ══════════════════════════════ 결과 모달 (s/auto.php) ══════════════════════════════ */ #sa-result-modal{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:99998; display:flex; align-items:center; justify-content:center; } .sa-res-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(15,39,68,.75); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); cursor:pointer; } .sa-res-container{ position:relative; z-index:1; background:#fff; border-radius:20px; overflow:hidden; max-width:380px; width:92%; box-shadow:0 24px 60px rgba(0,0,0,.35); animation:saModalIn .3s cubic-bezier(.34,1.3,.64,1); } .sa-res-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f0f4f8; } .sa-res-title{ font-size:16px; font-weight:900; color:#0f2744; display:flex; align-items:center; gap:8px; } .sa-res-title i{ color:#f59e0b; } .sa-res-close{ width:30px; height:30px; border-radius:50%; border:1px solid #e2e8f0; background:#f8fafc; color:#64748b; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; padding:0; transition:all .14s; } .sa-res-close:hover{ background:#fee2e2; color:#ef4444; border-color:#fca5a5; } .sa-res-body{ padding:14px 16px; max-height:55vh; overflow-y:auto; } /* 결과 볼 스타일 (s/auto.php) — c-lotto-box/c-lotto/ball은 위 rlog-info 섹션과 동일해 생략, plus만 s/auto.php 전용 */ #tgi-lottoResultView .c-lotto .plus{ line-height:44px !important; width:16px !important; color:#94a3b8; font-size:11px; } .sa-res-footer{ display:flex; gap:10px; padding:14px 16px; border-top:1px solid #f0f4f8; } .sa-res-btn-cap{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; background:#0f2744; color:#fff; border:none; font-size:14px; font-weight:800; padding:12px 0; border-radius:10px; cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:background .14s; } .sa-res-btn-cap:hover{ background:#1d4ed8; } .sa-res-btn-retry{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; background:#f8fafc; color:#374151; border:1px solid #e2e8f0; font-size:14px; font-weight:800; padding:12px 0; border-radius:10px; cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:all .14s; } .sa-res-btn-retry:hover{ background:#0f2744; color:#fff; border-color:#0f2744; } @media(max-width:360px){ .lotto-animation-container{ padding:28px 16px 22px; } .lotto-ball-placeholder{ width:42px; height:42px; font-size:14px; } .lotto-balls-container{ gap:6px; } #tgi-lottoResultView .c-lotto .ball{ width:36px !important; height:36px; line-height:36px !important; font-size:12px !important; } } /* ============================================================ lotto/a/hope.php — 로또 소원빌기 ============================================================ */ #v-lotto-a-hope { --ah-navy: #0f2744; --ah-blue: #1d4ed8; --ah-gold: #f59e0b; --ah-gldf: #fef3c7; --ah-line: #e2e8f0; --ah-bg: #f8fafc; --ah-ink: #0f172a; --ah-sub: #64748b; padding-bottom: 48px; } /* 히어로 */ .ah-hero { position: relative; background: linear-gradient(135deg, #0f2744 0%, #1e3a8a 55%, #1e1b4b 100%); border-radius: 20px; padding: 44px 24px 40px; margin: 16px 0 24px; overflow: hidden; text-align: center; } .ah-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 12% 25%, rgba(245,158,11,.2) 0%, transparent 60%), radial-gradient(ellipse 45% 40% at 88% 75%, rgba(96,165,250,.14) 0%, transparent 60%); pointer-events: none; } .ah-hero-inner { position: relative; z-index: 1; } .ah-hero-icon { font-size: 38px; color: var(--ah-gold); display: block; margin-bottom: 14px; filter: drop-shadow(0 2px 16px rgba(245,158,11,.55)); } .ah-hero-title { font-size: 24px; font-weight: 900; color: #fff; margin: 0 0 10px; letter-spacing: -.02em; } .ah-hero-sub { font-size: 14px; color: rgba(255,255,255,.72); margin: 0 auto 20px; line-height: 1.65; max-width: 380px; word-break: keep-all; } .ah-hero-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .ah-hero-tags span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.82); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); padding: 5px 12px; border-radius: 50px; } /* 작성 폼 */ .ah-form-card { background: #fff; border: 1px solid var(--ah-line); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 24px rgba(15,39,68,.08); margin-bottom: 28px; } .ah-form-head { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--ah-line); font-size: 14px; font-weight: 800; color: var(--ah-navy); background: var(--ah-bg); } .ah-form-head i { color: var(--ah-blue); } .ah-ta-box { position: relative; padding: 16px 20px 8px; } .ah-ta-box textarea { width: 100%; min-height: 116px; border: 1.5px solid var(--ah-line); border-radius: 12px; padding: 44px 16px 30px; /* 상단 여백: .ah-auto-btn(자동완성 버튼)과 글자가 겹치지 않도록 */ font-size: 15px; line-height: 1.75; color: var(--ah-ink); resize: vertical; outline: none; font-family: inherit; background: var(--ah-bg); transition: border-color .18s, box-shadow .18s, background .18s; word-break: keep-all; } .ah-ta-box textarea:focus { border-color: var(--ah-blue); box-shadow: 0 0 0 3px rgba(29,78,216,.1); background: #fff; } .ah-cnt { position: absolute; bottom: 16px; right: 28px; font-size: 11px; color: var(--ah-sub); font-weight: 600; pointer-events: none; } /* 자동완성 버튼 — textarea 우상단에 얹는 작은 알약형 버튼 */ .ah-auto-btn { position: absolute; top: 26px; right: 30px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--ah-line); border-radius: 50px; color: var(--ah-blue); font-size: 12px; font-weight: 700; padding: 6px 14px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, transform .15s; } .ah-auto-btn i { transition: transform .3s; } .ah-auto-btn:hover { border-color: var(--ah-blue); background: rgba(29,78,216,.06); } .ah-auto-btn:active { transform: scale(.96); } .ah-auto-btn:disabled { opacity: .6; cursor: default; } .ah-auto-btn.loading i { animation: ah-auto-spin .6s linear infinite; } @keyframes ah-auto-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media(max-width: 480px){ .ah-auto-btn { top: 24px; right: 22px; padding: 5px 11px; font-size: 11px; } } .ah-form-bot { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 18px; gap: 12px; flex-wrap: wrap; } /* 닉네임 숨기기 토글 */ .ah-anon { display: flex; align-items: center; gap: 9px; cursor: pointer; } .ah-anon input[type="checkbox"] { display: none; } .ah-sw-track { position: relative; width: 40px; height: 22px; background: #e2e8f0; border-radius: 50px; transition: background .18s; flex-shrink: 0; } .ah-sw-knob { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: left .18s; box-shadow: 0 1px 4px rgba(0,0,0,.2); } .ah-anon input:checked + .ah-sw-track { background: var(--ah-navy); } .ah-anon input:checked + .ah-sw-track .ah-sw-knob { left: 21px; } .ah-anon-label { font-size: 13px; font-weight: 700; color: var(--ah-sub); display: flex; align-items: center; gap: 5px; } /* 소원빌기 버튼 */ .ah-submit-btn { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, var(--ah-navy) 0%, var(--ah-blue) 100%); color: #fff; border: none; cursor: pointer; padding: 12px 26px; border-radius: 50px; font-size: 14px; font-weight: 800; box-shadow: 0 4px 18px rgba(29,78,216,.38); transition: transform .14s, box-shadow .14s; position: relative; overflow: hidden; } .ah-submit-btn::after { content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transform: skewX(-20deg); transition: left .4s ease; } .ah-submit-btn:hover::after { left: 140%; } .ah-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(29,78,216,.48); } .ah-submit-btn:active { transform: none; } /* 비로그인 */ .ah-gate { text-align: center; background: var(--ah-bg); border: 1.5px dashed var(--ah-line); border-radius: 20px; padding: 44px 24px; margin-bottom: 28px; } .ah-gate-icon { font-size: 44px; color: #c7d2fe; margin-bottom: 14px; display: block; } .ah-gate-msg { font-size: 16px; font-weight: 700; color: var(--ah-sub); margin: 0 0 22px; line-height: 1.65; } .ah-gate-msg small { font-size: 13px; font-weight: 600; } .ah-gate-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ah-navy); color: #fff; padding: 13px 28px; border-radius: 50px; font-size: 14px; font-weight: 800; transition: transform .14s, box-shadow .14s; box-shadow: 0 4px 14px rgba(15,39,68,.3); } .ah-gate-btn:hover { transform: translateY(-1px); color: #fff; } /* 목록 헤더 */ .ah-list-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .ah-list-ttl { font-size: 15px; font-weight: 900; color: var(--ah-ink); display: flex; align-items: center; gap: 7px; } .ah-list-ttl i { color: var(--ah-blue); } .ah-list-n { font-size: 13px; color: var(--ah-sub); font-weight: 700; } /* 소원 아이템 */ .ah-list { display: flex; flex-direction: column; gap: 10px; } .ah-item { position: relative; background: #fff; border: 1px solid var(--ah-line); border-left: 4px solid var(--ah-line); border-radius: 14px; padding: 14px 16px 12px; transition: box-shadow .15s; } .ah-item:hover { box-shadow: 0 2px 12px rgba(15,39,68,.07); } .ah-item.is-win { border-left-color: var(--ah-gold); background: linear-gradient(to right, #fffef5 0%, #fff 55%); } .ah-item.is-del { opacity: .5; } /* 아이템 상단 */ .ah-item-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; gap: 8px; flex-wrap: wrap; } .ah-nick { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--ah-navy); background: var(--ah-bg); padding: 3px 10px; border-radius: 50px; border: 1px solid var(--ah-line); } .ah-item.is-anon .ah-nick { color: var(--ah-sub); } .ah-hd-r { display: flex; align-items: center; gap: 6px; } .ah-dt { font-size: 12px; color: var(--ah-sub); font-weight: 600; } /* 메시지 */ .ah-msg { font-size: 14px; line-height: 1.78; color: var(--ah-ink); overflow: hidden; max-height: 100px; word-break: keep-all; } .ah-item.more-on .ah-msg { max-height: none; } /* 아이템 하단 */ .ah-item-ft { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .ah-rp-win { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: #92400e; background: var(--ah-gldf); border: 1px solid #fde68a; padding: 3px 10px; border-radius: 50px; } .ah-rp-zzang { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ah-sub); background: var(--ah-bg); border: 1px solid var(--ah-line); padding: 3px 10px; border-radius: 50px; } .ah-more { background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ah-sub); padding: 3px 8px; border-radius: 8px; display: none; align-items: center; gap: 3px; transition: background .12s, color .12s; } .ah-more:hover { background: var(--ah-bg); color: var(--ah-navy); } .ah-item.has-more .ah-more.on { display: inline-flex; } .ah-item.has-more.more-on .ah-more.on { display: none; } .ah-item.has-more.more-on .ah-more.off { display: inline-flex; } /* 삭제 버튼 */ .ah-del-btn { background: none; border: none; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ah-sub); flex-shrink: 0; transition: background .12s, color .12s; } .ah-del-btn:hover { background: #fee2e2; color: #dc2626; } .ah-del-txt { font-size: 13px; color: var(--ah-sub); font-style: italic; } /* 빈 목록 */ .ah-empty { text-align: center; padding: 60px 0; color: var(--ah-sub); } .ah-empty i { font-size: 48px; color: var(--ah-line); display: block; margin-bottom: 14px; } .ah-empty p { font-size: 14px; font-weight: 700; margin: 0; } /* 페이징 */ .ah-paging { text-align: center; padding: 20px 0 0; } /* 모바일 */ @media(max-width:767px){ .ah-hero { padding: 32px 16px; border-radius: 16px; } .ah-hero-title { font-size: 20px; } .ah-hero-sub { font-size: 13px; } .ah-form-bot { flex-direction: column; align-items: stretch; } .ah-submit-btn { justify-content: center; } } /* ============================================================ lotto/lab/research-set.php — 연구일지 분석팩 설정 (rs-*) ============================================================ */ #v-lotto-lab-research-set{ --rs-navy:#0f2744; --rs-blue:#1d4ed8; --rs-blue-s:#eff6ff; --rs-line:#e2e8f0; --rs-bg:#f8fafc; --rs-ink:#0f172a; --rs-sub:#64748b; --rs-mod:#fffbeb; --rs-mod-b:#fde68a; } /* 안내 */ .rs-guide{ font-size:13px; } .rs-guide-highlight{ color:#d97706; font-weight:800; background:#fef3c7; padding:1px 5px; border-radius:4px; } /* ── 프리셋 툴바 ── */ .rs-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:#fff; border:1px solid var(--rs-line); border-radius:12px; padding:12px 16px; margin-bottom:14px; } .rs-toolbar-left, .rs-toolbar-right{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; } .rs-toolbar-left{ flex:1; } .rs-toolbar-right{ border-left:1px solid var(--rs-line); padding-left:12px; } .rs-toolbar-label{ font-size:11px; font-weight:800; letter-spacing:.05em; color:var(--rs-sub); white-space:nowrap; } /* 프리셋 버튼 */ .rs-preset-btn{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; padding:7px 13px; border-radius:8px; border:1px solid var(--rs-line); background:#fff; color:var(--rs-ink); cursor:pointer; transition:all .14s; font-family:'Noto Sans KR',sans-serif; } .rs-preset-btn:hover{ background:var(--rs-navy); color:#fff; border-color:var(--rs-navy); } .rs-preset-btn i{ color:var(--rs-blue); } .rs-preset-btn:hover i{ color:#93c5fd; } .rs-preset-reset{ color:#ef4444; } .rs-preset-reset i{ color:#ef4444; } .rs-preset-reset:hover{ background:#ef4444; color:#fff; border-color:#ef4444; } .rs-preset-reset:hover i{ color:#fff; } /* 전체 일괄 입력 */ .rs-batch-input{ width:64px; padding:5px 8px; border:1px solid var(--rs-line); border-radius:6px; font-size:12px; font-weight:700; text-align:center; outline:none; transition:border-color .14s; } .rs-batch-input:focus{ border-color:var(--rs-blue); } /* ── 그룹 섹션 ── */ .rs-group{ margin-bottom:18px; } .rs-group-head{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; background:#fff; border:1px solid var(--rs-line); border-radius:10px 10px 0 0; border-bottom:none; padding:10px 14px; } .rs-group-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:54px; height:28px; border-radius:7px; font-size:12px; font-weight:900; padding:0 10px; font-family:'Noto Sans KR',sans-serif; } .rs-group-badge.lotto-group-1{ background:#FFBF05; color:#5a4200; } .rs-group-badge.lotto-group-2{ background:#0033ff; color:#fff; } .rs-group-badge.lotto-group-3{ background:#ff0000; color:#fff; } .rs-group-badge.lotto-group-4{ background:#444; color:#fff; } .rs-group-badge.lotto-group-5{ background:#01df3a; color:#004d14; } .rs-group-bulk{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .rs-gbulk-input{ width:60px; padding:5px 7px; border:1px solid var(--rs-line); border-radius:6px; font-size:12px; font-weight:700; text-align:center; outline:none; transition:border-color .14s; } .rs-gbulk-input:focus{ border-color:var(--rs-blue); } .rs-gbulk-btn{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; padding:6px 12px; border-radius:7px; border:1px solid var(--rs-blue); background:var(--rs-blue); color:#fff; cursor:pointer; transition:all .14s; font-family:'Noto Sans KR',sans-serif; } .rs-gbulk-btn:hover{ background:var(--rs-navy); border-color:var(--rs-navy); } /* ── 번호 카드 그리드 ── */ .rs-num-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; padding:10px 14px 14px; background:#fff; border:1px solid var(--rs-line); border-radius:0 0 10px 10px; } @media(min-width:480px){ .rs-num-grid{ grid-template-columns:repeat(10, 1fr); } } /* 번호 카드 */ .rs-card{ border:1px solid var(--rs-line); border-radius:10px; padding:8px 6px; background:var(--rs-bg); transition:border-color .15s, background .15s, box-shadow .15s; display:flex; flex-direction:column; align-items:center; gap:6px; } .rs-card.rs-modified{ background:var(--rs-mod); border-color:var(--rs-mod-b); box-shadow:0 0 0 1px rgba(245,158,11,.18); } /* 번호 볼 */ .rs-ball{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; flex-shrink:0; font-family:'Noto Sans KR',sans-serif; position:relative; } .rs-ball::after{ content:''; position:absolute; top:9%; left:15%; width:38%; height:30%; border-radius:50%; background:rgba(255,255,255,.35); pointer-events:none; } .rs-ball.lotto-group-1{ background:#FFBF05; color:#5a4200; } .rs-ball.lotto-group-2{ background:#0033ff; color:#fff; } .rs-ball.lotto-group-3{ background:#ff0000; color:#fff; } .rs-ball.lotto-group-4{ background:#444; color:#fff; } .rs-ball.lotto-group-5{ background:#01df3a; color:#004d14; } /* 입력 필드 */ .rs-fields{ width:100%; display:flex; flex-direction:column; gap:3px; } .rs-field-row{ display:flex; align-items:center; gap:3px; } .rs-fl{ font-size:9px; font-weight:900; color:var(--rs-sub); width:10px; flex-shrink:0; letter-spacing:.02em; } .rs-num-input{ width:100%; min-width:0; padding:3px 4px; border:1px solid var(--rs-line); border-radius:5px; font-size:12px; font-weight:800; text-align:center; outline:none; background:#fff; color:var(--rs-ink); transition:border-color .12s, background .12s; font-family:'Noto Sans KR',sans-serif; } .rs-num-input:focus{ border-color:var(--rs-blue); background:var(--rs-blue-s); } .rs-card.rs-modified .rs-num-input{ border-color:#f59e0b; background:#fffbeb; } .rs-card.rs-modified .rs-num-input:focus{ border-color:var(--rs-blue); background:var(--rs-blue-s); } @media(max-width:400px){ .rs-toolbar-right{ border-left:none; padding-left:0; border-top:1px solid var(--rs-line); padding-top:8px; width:100%; } .rs-group-head{ flex-direction:column; align-items:flex-start; } } /* ============================================================ lotto/a/zodiac.php — 띠별 행운번호 (az-header는 analyze.php와 동일 스타일 언어 공유) ============================================================ */ #v-lotto-a-zodiac{ --zd-navy:#0f2744; --zd-blue:#1d4ed8; --zd-line:#e2e8f0; --zd-bg:#f8fafc; --zd-ink:#0f172a; --zd-sub:#64748b; } #v-lotto-a-zodiac .bc{ font-size:13px; color:#94a3b8; margin:14px 0 0; line-height:2; } #v-lotto-a-zodiac .az-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:16px 0 18px; flex-wrap:wrap; } #v-lotto-a-zodiac .az-header-title{ font-size:20px; font-weight:900; color:var(--zd-navy); margin:0 0 5px; display:flex; align-items:center; gap:8px; } #v-lotto-a-zodiac .az-header-title i{ color:var(--zd-blue); } #v-lotto-a-zodiac .az-header-sub{ font-size:13px; color:var(--zd-sub); margin:0; font-weight:600; } #v-lotto-a-zodiac .az-round-badge{ background:var(--zd-bg); border:1px solid var(--zd-line); font-size:13px; font-weight:700; color:var(--zd-sub); padding:5px 12px; border-radius:50px; white-space:nowrap; align-self:flex-start; margin-top:2px; } #v-lotto-a-zodiac .zd-picker{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:20px 0 26px; } @media(max-width:720px){ #v-lotto-a-zodiac .zd-picker{ grid-template-columns:repeat(4,1fr); } } @media(max-width:480px){ #v-lotto-a-zodiac .zd-picker{ grid-template-columns:repeat(3,1fr); } } #v-lotto-a-zodiac .zd-picker-item{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px; border:1.5px solid var(--zd-line); border-radius:14px; background:#fff; text-decoration:none; color:var(--zd-sub); box-shadow:0 1px 2px rgba(15,39,68,.04); transition:transform .15s,border-color .15s,box-shadow .15s,background .15s; } #v-lotto-a-zodiac .zd-picker-item:hover{ transform:translateY(-2px); border-color:#cbd5e1; box-shadow:0 6px 14px rgba(15,39,68,.08); } #v-lotto-a-zodiac .zd-picker-item.on{ border-color:var(--zd-blue); background:linear-gradient(180deg,#eff6ff,#fff); color:var(--zd-blue); font-weight:800; box-shadow:0 4px 12px rgba(29,78,216,.18); } #v-lotto-a-zodiac .zd-emoji{ font-size:30px; line-height:1; } #v-lotto-a-zodiac .zd-name{ font-size:12.5px; font-weight:700; } #v-lotto-a-zodiac .zd-empty{ text-align:center; padding:50px 20px; color:var(--zd-sub); background:var(--zd-bg); border:1.5px dashed var(--zd-line); border-radius:16px; } #v-lotto-a-zodiac .zd-empty i{ font-size:26px; margin-bottom:8px; display:block; color:#cbd5e1; } #v-lotto-a-zodiac .zd-empty p{ margin:0; font-size:13.5px; font-weight:600; } #v-lotto-a-zodiac .zd-result{ background:#fff; border:1px solid var(--zd-line); border-radius:18px; padding:24px; margin-bottom:24px; box-shadow:0 2px 10px rgba(15,39,68,.05); } #v-lotto-a-zodiac .zd-result-hero{ display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--zd-line); } #v-lotto-a-zodiac .zd-hero-emoji{ font-size:40px; line-height:1; } #v-lotto-a-zodiac .zd-hero-name{ font-size:18px; font-weight:900; color:var(--zd-navy); } #v-lotto-a-zodiac .zd-hero-sub{ font-size:12.5px; font-weight:600; color:var(--zd-sub); margin-top:2px; } #v-lotto-a-zodiac .zd-balls{ display:flex; flex-wrap:wrap; gap:10px; } #v-lotto-a-zodiac .zd-balls .ball{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; color:#fff; font-size:14px; font-weight:900; box-shadow:0 2px 5px rgba(0,0,0,.12); } #v-lotto-a-zodiac .zd-balls .ball.lotto-group-1{ background:#FFBF05; color:#333; } #v-lotto-a-zodiac .zd-balls .ball.lotto-group-2{ background:#03F; } #v-lotto-a-zodiac .zd-balls .ball.lotto-group-3{ background:#F00; } #v-lotto-a-zodiac .zd-balls .ball.lotto-group-4{ background:#333; } #v-lotto-a-zodiac .zd-balls .ball.lotto-group-5{ background:#01DF3A; color:#333; } /* ============================================================ lotto/s/rank.php — 회차별 통계(회차별 순위) ============================================================ */ #v-lotto-s-rank{ --sr-navy:#0f2744; --sr-blue:#1d4ed8; --sr-blue-s:#eff6ff; --sr-ink:#0f172a; --sr-sub:#64748b; --sr-line:#e2e8f0; --sr-bg:#f8fafc; overflow:hidden; margin-bottom:64px; padding:0 2%; box-sizing:border-box; } #v-lotto-s-rank .bc{ font-size:13px; color:#c7cad0; margin:14px 0 10px; line-height:2; } #v-lotto-s-rank .bc a{ display:inline-block; padding:4px 9px; border-radius:20px; color:#f04; font-weight:800; text-decoration:none; transition:background .12s ease; } #v-lotto-s-rank .bc a:hover, #v-lotto-s-rank .bc a:active{ background:rgba(255,0,68,.1); } #v-lotto-s-rank .bc strong{ display:inline-block; padding:0 2px; color:#666; font-weight:700; } #v-lotto-s-rank h1.sr-tit{ font-size:21px; font-weight:900; font-family:'Noto Sans KR',sans-serif; margin:12px 0 4px; color:var(--sr-ink); } #v-lotto-s-rank h1.sr-tit i{ color:var(--sr-blue); margin-right:6px; } #v-lotto-s-rank .sr-lead{ color:var(--sr-sub); font-size:13px; line-height:21px; margin:0 0 14px; } /* 필터 카드 */ #v-lotto-s-rank .sr-filter{ background:#fff; border:solid 1px var(--sr-line); border-radius:14px; padding:16px 18px; margin-bottom:18px; box-shadow:0 2px 10px rgba(15,23,42,.05); } #v-lotto-s-rank .sr-field{ margin-bottom:14px; } #v-lotto-s-rank .sr-field:last-child{ margin-bottom:0; } #v-lotto-s-rank .sr-field-label{ font-size:11px; font-weight:700; color:var(--sr-sub); text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px; } #v-lotto-s-rank .sr-chips{ display:flex; flex-wrap:wrap; gap:6px; } #v-lotto-s-rank .sr-chips a{ display:inline-block; padding:6px 14px; border:solid 1px var(--sr-line); border-radius:50px; font-size:12px; font-weight:700; color:#555; background:#fff; text-decoration:none; cursor:pointer; transition:all .14s; } #v-lotto-s-rank .sr-chips a.on{ background:var(--sr-navy); color:#fff; border-color:var(--sr-navy); } #v-lotto-s-rank .sr-chips a:hover{ border-color:var(--sr-navy); } /* 순위 카드 리스트 */ #v-lotto-s-rank .sr-list{ display:flex; flex-direction:column; gap:12px; } #v-lotto-s-rank .sr-card{ background:#fff; border:solid 1px var(--sr-line); border-radius:14px; padding:16px; box-shadow:0 2px 10px rgba(15,23,42,.04); } #v-lotto-s-rank .sr-card-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; } #v-lotto-s-rank .sr-rank{ font-size:13px; font-weight:900; color:var(--sr-blue); } #v-lotto-s-rank .sr-round{ font-size:16px; font-weight:900; color:var(--sr-navy); text-decoration:none; } #v-lotto-s-rank .sr-date{ font-size:12px; color:var(--sr-sub); margin-left:auto; } #v-lotto-s-rank .sr-balls{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:8px 0; } #v-lotto-s-rank .sr-balls .ball{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; color:#fff; font-size:12px; font-weight:900; } #v-lotto-s-rank .sr-balls .ball.g1{ background:#FFBF05; color:#333; } #v-lotto-s-rank .sr-balls .ball.g2{ background:#03F; } #v-lotto-s-rank .sr-balls .ball.g3{ background:#F00; } #v-lotto-s-rank .sr-balls .ball.g4{ background:#333; } #v-lotto-s-rank .sr-balls .ball.g5{ background:#01DF3A; color:#333; } #v-lotto-s-rank .sr-balls .plus{ color:#bbb; margin:0 2px; font-size:12px; } #v-lotto-s-rank .sr-metrics{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; border-top:solid 1px #f1f4f8; padding-top:10px; } #v-lotto-s-rank .sr-metric{ text-align:center; padding:6px 2px; border-radius:8px; } #v-lotto-s-rank .sr-metric.on{ background:var(--sr-blue-s); } #v-lotto-s-rank .sr-metric-label{ display:block; font-size:10px; color:var(--sr-sub); margin-bottom:3px; } #v-lotto-s-rank .sr-metric.on .sr-metric-label{ color:var(--sr-blue); font-weight:700; } #v-lotto-s-rank .sr-metric-val{ display:block; font-size:11px; font-weight:800; color:var(--sr-ink); word-break:break-all; } #v-lotto-s-rank .sr-metric.on .sr-metric-val{ color:var(--sr-navy); } #v-lotto-s-rank .sr-empty{ text-align:center; padding:30px; color:var(--sr-sub); } #v-lotto-s-rank .sr-empty .icon{ font-size:36px; margin-bottom:8px; } @media(max-width:600px){ #v-lotto-s-rank .sr-metrics{ grid-template-columns:repeat(3,1fr); } #v-lotto-s-rank .sr-metric-val{ font-size:10.5px; } } #v-lotto-a-zodiac .zd-note{ display:flex; gap:8px; align-items:flex-start; margin-top:20px; padding:12px 14px; background:var(--zd-bg); border-left:3px solid var(--zd-blue); border-radius:8px; font-size:12px; color:var(--zd-sub); line-height:1.6; } #v-lotto-a-zodiac .zd-note i{ color:var(--zd-blue); margin-top:1px; }