/* 로또 페이지 스타일 — 리뉴얼 2B 시안(8-bit 딥네이비·골드 다크 테마)
   · Index(번호 추첨): 디자인 목업(Lotto-standalone) 기반, _Layout 사용, .lt-* 클래스
   · List(회차별 목록): _LayoutSub 사용, .wrapper/.ball/.nums 등 하위 호환 스타일 유지
   lotto.css 는 로또 Index/List 에서만 로드된다.
   body 다크 배경/선택색은 공용 _DarkLayout(css/dark.css)로 통합됨. */

@keyframes lt-ballpop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* ══════════════════════════════════════════════════════
   Index(번호 추첨) — 디자인 목업
   ══════════════════════════════════════════════════════ */

/* 픽셀 배너 */
.lt-banner { position: relative; height: 148px; background: linear-gradient(180deg, #1a2a6e 0%, #10193f 68%, #0a1028 100%); overflow: hidden; border-bottom: 1px solid #23306a; }
.lt-banner-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(245,197,66,0.16) 1.5px, transparent 1.5px); background-size: 26px 26px; }
.lt-banner-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.10) 2px 4px); }
.lt-banner-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.lt-banner-title { font-family: 'Press Start 2P', monospace; font-size: 24px; color: #f5c542; text-shadow: 0 3px 0 #070b1f; }
.lt-banner-sub { font-size: 14px; color: #a9b6df; }

/* 서브 내비(.sub-nav)는 사이트 공용 파티셜(_NavigationPartial) + site.css 사용 */

/* 콘텐츠 그리드 */
/* gap: 30px(행) 48px(열) — 열 간격을 넓혀 목록/검색 영역과 사이드바를 시각적으로 분리 */
.lt-wrap { max-width: 1200px; margin: 0 auto; padding: 34px 32px 90px; display: grid; grid-template-columns: 1fr 300px; gap: 30px 48px; color: #e8ecf7; font-family: 'Pretendard', system-ui, sans-serif; }
.lt-col-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
/* List 페이지: 목록·페이지네이션·검색 사이 세로 간격을 좁게(공용 26 → 16), 추가 margin 제거 */
.lt-col-list { gap: 16px; }
.lt-col-list .lt-list-head { margin-bottom: 0; }
.lt-col-list .pager { margin-top: 0; }
.lt-col-list .lt-list-search { margin-top: 0; }
@media (max-width: 992px) { .lt-wrap { grid-template-columns: 1fr; } }
/* 모바일 오버라이드는 파일 끝(기본 .lt-* 규칙 뒤)에 위치 — 소스 순서로 확실히 덮어쓰기 위함 */

/* 카드 공통 */
.lt-card { border: 1px solid #23306a; border-radius: 16px; background: #0a0e1f; overflow: hidden; }
/* 생성기 카드는 드롭다운(자동 추천) 레이어가 카드 밖으로 펼쳐져야 하므로 클리핑 해제 */
.lt-card-gen { overflow: visible; }
.lt-card-head { padding: 22px 26px 6px; }
.lt-card-title { font-size: 15px; font-weight: 800; color: #e8ecf7; }
.lt-card-sub { font-size: 12px; font-family: monospace; color: #6f7ea8; margin-top: 6px; }

/* 통계 차트 — 투명 배경(다크 카드 위에 직접 렌더). 다크 스타일은 lotto.js drawChart 참조 */
.lt-chart-body { padding: 10px 14px 22px; }
#statistics { width: 100%; min-height: 400px; background: transparent; }

/* 최근 회차 카드(신규 — 정적 플레이스홀더) */
.lt-latest-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 20px 26px; background: #111938; border-bottom: 1px solid #23306a; }
.lt-latest-round { font-family: 'Press Start 2P', monospace; font-size: 16px; color: #f5c542; }
.lt-latest-date { font-size: 13px; font-family: monospace; color: #8da0d6; margin-left: 12px; }
.lt-latest-link { margin-left: auto; text-decoration: none; font-size: 12px; font-family: monospace; color: #8da0d6; border: 1px solid #23306a; border-radius: 7px; padding: 7px 13px; }
.lt-latest-link:hover { border-color: #f5c542; color: #f5c542; }
.lt-latest-body { padding: 28px 26px 30px; }
.lt-latest-label { font-size: 12px; font-family: monospace; color: #6f7ea8; letter-spacing: 1px; margin-bottom: 16px; }
.lt-latest-balls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.lt-plus { font-family: monospace; color: #6f7ea8; font-size: 24px; font-weight: 700; margin: 0 2px; }
.lt-bonus-label { font-size: 11px; font-family: monospace; color: #6f7ea8; align-self: flex-end; padding-bottom: 4px; }
.lt-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.lt-stat-box { border: 1px solid #23306a; border-radius: 11px; background: #080b1a; padding: 15px 17px; }
.lt-stat-cap { font-size: 12px; color: #8da0d6; margin-bottom: 6px; }
.lt-stat-val { font-family: monospace; font-size: 20px; font-weight: 800; color: #e8ecf7; }
.lt-stat-val.gold { color: #f5c542; }

/* 행운 번호 뽑기(생성기) */
.lt-gen-head { display: flex; flex-direction: column; gap: 6px; padding: 20px 26px 16px; }
.lt-gen-title { font-family: 'Press Start 2P', monospace; font-size: 13px; color: #e8ecf7; }
.lt-gen-desc { font-size: 13px; color: #8da0d6; }
.lt-gen-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 0 26px 16px; border-bottom: 1px solid #1b2a4e; }
.lt-gen-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

select.lt-select { appearance: none; -webkit-appearance: none; font-family: 'Pretendard', sans-serif; font-size: 13px; color: #c3cdec; background-color: #0a0e1f; border: 1px solid #23306a; border-radius: 8px; padding: 9px 34px 9px 13px; cursor: pointer; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath d='M2 4l4 4 4-4' fill='none' stroke='%238da0d6' stroke-width='1.6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; }
select.lt-select:focus { border-color: #f5c542; outline: none; }
.lt-select option { background: #0c1230; color: #e8ecf7; }

.lt-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c3cdec; cursor: pointer; margin: 0; }
.lt-check input { width: 16px; height: 16px; accent-color: #f5c542; cursor: pointer; }

.lt-gen-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: 'Pretendard', sans-serif; font-size: 13px; font-weight: 700; color: #0a1130; background: #f5c542; border: none; padding: 11px 18px; border-radius: 9px; }
.lt-gen-btn:hover, .lt-gen-btn:focus { background: #ffd75e; color: #0a1130; }
.lt-gen-btn:active, .show > .lt-gen-btn { background: #ffd75e; color: #0a1130; }
/* Bootstrap 캐럿을 버튼 안쪽에 정렬(겹쳐 보이는 현상 방지) */
.lt-gen-btn.dropdown-toggle::after { margin-left: 0; vertical-align: middle; }
.lt-gen-menu.dropdown-menu { background: #0c1230; border: 1px solid #2c3c7e; border-radius: 11px; padding: 7px; min-width: 210px; box-shadow: 0 16px 34px rgba(0,0,0,0.55); }
.lt-gen-menu.dropdown-menu.show { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.lt-gen-menu li { list-style: none; }
.lt-gen-menu .dropdown-item { display: block; width: 100%; text-align: center; font-size: 13px; font-weight: 700; font-family: monospace; color: #c3cdec; background: #0a0e1f; border: 1px solid #23306a; border-radius: 8px; padding: 9px 0; }
.lt-gen-menu .dropdown-item:hover, .lt-gen-menu .dropdown-item:focus { border-color: #f5c542; color: #f5c542; background: #0a0e1f; }

.lt-gen-body { padding: 8px 26px 24px; }
.lt-genrow { display: flex; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid #12203f; }
.lt-genrow:last-child { border-bottom: 0; }
.lt-genlabel { font-family: 'Press Start 2P', monospace; font-size: 11px; color: #6f7ea8; width: 64px; flex-shrink: 0; }
.lt-genballs { display: flex; flex-wrap: wrap; gap: 10px; }
.lt-empty { padding: 26px 4px; color: #6f7ea8; font-size: 13px; text-align: center; }

/* 로또 볼(디자인 목업 스타일) */
.lt-ball { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-family: monospace; font-weight: 800; font-size: 17px; border: 2px solid #0a1130; box-shadow: 0 4px 0 rgba(0,0,0,0.32); animation: lt-ballpop .4s ease; }
.lt-ball-lg { width: 54px; height: 54px; font-size: 21px; }
.lt-ball-sm { width: 34px; height: 34px; font-size: 13px; box-shadow: 0 3px 0 rgba(0,0,0,0.32); }
.lt-ball-1 { background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.55), #f5c542 62%); color: #5a4410; }
.lt-ball-2 { background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.55), #6fa0e8 62%); color: #0a1130; }
.lt-ball-3 { background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.55), #ff7272 62%); color: #3a0d0d; }
.lt-ball-4 { background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.6), #9e9e9e 62%); color: #2b2f36; }
.lt-ball-5 { background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.55), #4cae7a 62%); color: #06231a; }

/* 우측 사이드바 */
.lt-aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }   /* 그리드 항목이 콘텐츠로 인해 넓어져 페이지가 넘치는 것 방지 */
.lt-side-card { border: 1px solid #23306a; border-radius: 12px; background: #111938; padding: 18px; }
.lt-side-title { font-family: 'Press Start 2P', monospace; font-size: 12px; color: #f5c542; margin-bottom: 14px; }
.lt-search-row { display: flex; gap: 8px; }
.lt-search-input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid #23306a; border-radius: 8px; background: #0a0e1f; color: #e8ecf7; font-size: 13px; outline: none; font-family: 'Pretendard', sans-serif; }
.lt-search-input:focus { border-color: #f5c542; }
.lt-search-input::placeholder { color: #5f6f9f; }
.lt-search-btn { padding: 11px 15px; background: #f5c542; color: #0a1130; border: 0; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.lt-search-btn:hover { background: #ffd75e; }
.lt-hot { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 6px; }
.lt-side-note { font-size: 12px; font-family: monospace; color: #6f7ea8; margin-top: 12px; }
.lt-legend { display: flex; flex-direction: column; gap: 9px; }
.lt-legend-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #c3cdec; }
.lt-legend-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #0a1130; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════
   List(회차별 목록) — 디자인 목업(Lotto-List) 기반, _Layout 사용, .lt-* 클래스
   배너·서브내비·그리드(.lt-banner/.lt-subnav/.lt-wrap 등)는 Index 섹션과 공용
   ══════════════════════════════════════════════════════ */

/* 목록 헤더 */
.lt-list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.lt-list-title { font-family: 'Press Start 2P', monospace; font-size: 14px; color: #e8ecf7; }
.lt-list-total { font-size: 13px; font-family: monospace; color: #6f7ea8; }

/* 접근성: 화면에는 숨기되 스크린리더에는 노출(테이블 caption 등) */
.lt-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 목록 테이블 */
.lt-list-tablewrap { overflow-x: auto; }
.lt-list-table { width: 100%; border-collapse: collapse; border-top: 2px solid #2c3c7e; min-width: 720px; }
.lt-list-table thead tr { background: #0c1230; border-bottom: 1px solid #23306a; }
/* 열 헤더(thead th) 전용 스타일 — 행 헤더(tbody th.c-round)에는 적용되지 않도록 thead 로 한정 */
.lt-list-table thead th { padding: 13px 12px; font-size: 13px; font-weight: 700; color: #8da0d6; text-align: center; white-space: nowrap; }
.lt-list-table th.c-nums { text-align: left; min-width: 0; }  /* 볼 폭만큼만 차지(고정폭 제거) → 남는 폭을 당첨금 등에 양보 */
.lt-list-table th.c-prize { text-align: right; }
.lt-list-table th.c-round { width: 84px; }
.lt-list-table th.c-date { width: 118px; }
.lt-list-table th.c-winners { width: 78px; }
.lt-list-table tbody tr { border-bottom: 1px solid #1b2a4e; transition: background .12s; }
.lt-list-table tbody tr:hover { background: #0c1230; }
.lt-list-table tbody tr.is-latest { background: rgba(245,197,66,0.06); }
.lt-list-table td { padding: 15px 12px; text-align: center; font-size: 13px; }
/* 행 헤더(회차) 셀 — 일반 데이터 셀(td)과 동일한 형태로 표시 */
.lt-list-table tbody th { padding: 15px 12px; text-align: center; font-size: 13px; font-weight: 400; }
.lt-list-table td.c-date { font-family: monospace; color: #8da0d6; }
.lt-list-table td.c-prize { text-align: right; font-family: monospace; font-weight: 700; color: #e8ecf7; }
.lt-list-table td.c-winners { font-family: monospace; color: #8da0d6; }
/* 테이블 모드(≥769px)에서만: 회차/추첨일/당첨금/당첨자는 줄바꿈 금지(최소폭 유지).
   부족한 폭은 로또번호 사이 여백(.lt-list-balls gap 가변)이 흡수. 카드 모드(≤768px)는 미적용. */
@media (min-width: 769px) {
	.lt-list-table .c-round, .lt-list-table .c-date,
	.lt-list-table .c-prize, .lt-list-table .c-winners { white-space: nowrap; }
}
.lt-list-round { font-family: 'Press Start 2P', monospace; font-size: 13px; color: #c3cdec; }
.is-latest .lt-list-round { color: #f5c542; }
.lt-list-badge { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 700; background: #f5c542; color: #0a1130; padding: 2px 7px; border-radius: 5px; }
/* 로또번호 사이 여백은 가변(clamp): 좁아지면 줄어들어 다른 컬럼 줄바꿈을 막고, 넓으면 8px 유지 */
.lt-list-balls { display: flex; align-items: center; gap: clamp(2px, 0.6vw, 8px); flex-wrap: nowrap; }
.lt-list-plus { font-family: monospace; color: #4f5d85; font-size: 16px; margin: 0 2px; flex-shrink: 0; }

/* 회차 범위 검색 */
.lt-list-search { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; flex-wrap: wrap; }
.lt-listsearch-input { width: 140px; padding: 11px 14px; border: 1px solid #23306a; border-radius: 8px; background: #0a0e1f; color: #e8ecf7; font-size: 13px; outline: none; font-family: 'Pretendard', sans-serif; }
.lt-listsearch-input:focus { border-color: #f5c542; }
.lt-listsearch-input::placeholder { color: #5f6f9f; }
.lt-listsearch-sep { font-family: monospace; color: #5f6f9f; font-size: 13px; }
.lt-listsearch-btn { padding: 11px 18px; background: #f5c542; color: #0a1130; border: 0; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.lt-listsearch-btn:hover { background: #ffd75e; }

/* 사이드바 — 최근 회차 요약 카드 */
.lt-sum-card { border: 1px solid #2c3c7e; border-radius: 12px; background: linear-gradient(180deg, #141d47 0%, #0d1330 100%); padding: 20px; }
.lt-sum-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.lt-sum-round { font-family: 'Press Start 2P', monospace; font-size: 12px; color: #f5c542; }
.lt-sum-date { font-size: 12px; font-family: monospace; color: #8da0d6; }
.lt-sum-balls { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; justify-content: center; padding: 6px 0 14px; }
.lt-sum-balls .lt-list-plus { font-size: 14px; }
.lt-sum-info { border-top: 1px solid #23306a; padding-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.lt-sum-row { display: flex; justify-content: space-between; font-size: 13px; }
.lt-sum-cap { color: #8da0d6; }
.lt-sum-val { font-family: monospace; color: #e8ecf7; }
.lt-sum-val.gold { color: #f5c542; font-weight: 700; }

/* 사이드바 — 최다 출현 번호 막대 */
.lt-freq { display: flex; flex-direction: column; gap: 11px; }
.lt-freq-row { display: flex; align-items: center; gap: 11px; }
.lt-freq-bar { flex: 1; height: 8px; border-radius: 5px; background: #0a0e1f; overflow: hidden; }
.lt-freq-fill { height: 100%; border-radius: 5px; }
.lt-freq-fill-1 { background: #f5c542; }
.lt-freq-fill-2 { background: #6fa0e8; }
.lt-freq-fill-3 { background: #ff7272; }
.lt-freq-fill-4 { background: #9e9e9e; }
.lt-freq-fill-5 { background: #4cae7a; }
.lt-freq-count { font-size: 12px; font-family: monospace; color: #8da0d6; width: 36px; text-align: right; flex-shrink: 0; }

/* List(회차별 목록) 페이지네이션은 사이트 공용 .pager(site.css) 사용 */

/* ══════════════════════════════════════════════════════
   모바일 오버라이드 — 기본 .lt-* 규칙보다 뒤에 두어 소스 순서로 확실히 적용
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
	/* 좌우 패딩 축소로 가로 폭을 넓게(좌우 대칭), 차트 영역도 넓게 */
	.lt-wrap { padding: 22px 14px 60px; gap: 20px; }
	.lt-chart-body { padding: 8px 4px 18px; }

	/* 최근 회차 헤더: 1행=회차 / 2행=추첨일(좌)·지난 회차(우) */
	.lt-latest-head { padding: 16px 16px; gap: 8px 10px; }
	.lt-latest-round { flex: 1 1 100%; }
	.lt-latest-date { margin-left: 0; }

	/* 당첨 볼: 크기·간격 축소 + 한 행(줄바꿈 없음)으로 보너스 번호까지 표시 */
	.lt-latest-body { padding: 20px 16px 22px; }
	.lt-latest-balls { flex-wrap: nowrap; gap: 2px; justify-content: space-between; }
	.lt-latest-balls .lt-ball-lg { width: 30px; height: 30px; font-size: 13px; box-shadow: 0 2px 0 rgba(0,0,0,0.32); }
	.lt-latest-balls .lt-plus { font-size: 14px; margin: 0; }
	.lt-latest-balls .lt-bonus-label { display: none; }   /* 모바일: '보너스' 글자 숨김(공간 확보) */

	/* 당첨금·당첨자수: 각각 한 줄(세로 스택)로 배치, 값은 줄바꿈 없이 */
	.lt-stats-grid { grid-template-columns: 1fr; }
	.lt-stat-val { white-space: nowrap; }

	/* 회차 범위 검색: 입력창 고정폭 해제 → 유연폭으로 한 줄 유지 */
	.lt-list-search { flex-wrap: nowrap; }
	.lt-listsearch-input { width: auto; flex: 1; min-width: 0; }
	.lt-listsearch-btn { flex-shrink: 0; }

	/* 사이드바 최근 회차 볼: 좁은 폭(예: 344px Z Fold 5)에서 넘치지 않게 축소 → 페이지 가로 스크롤/비대칭 방지 */
	.lt-sum-balls { gap: 4px; }
	.lt-sum-balls .lt-ball-sm { width: 30px; height: 30px; font-size: 12px; }
}

/* ── 목록 테이블 → 카드(배너) 형태 ──
   테이블 min-width(720px)로 인한 가로 스크롤을 없애고, 사이트 공용 모바일 페이저(768px)와 브레이크포인트 일치 */
@media (max-width: 768px) {
	.lt-list-tablewrap { overflow-x: visible; }
	/* 테이블 레이아웃 해제 → 블록으로: 카드가 컨테이너 폭에 정확히 맞아 좌우 대칭 유지 */
	.lt-list-table, .lt-list-table tbody { display: block; min-width: 0; }
	.lt-list-table { border-top: 0; }
	.lt-list-table thead { display: none; }                 /* 헤더 숨김(각 셀에 data-label 표시) */
	.lt-list-table tbody tr { display: block; border: 1px solid #23306a; border-radius: 12px; background: #111938; margin-bottom: 12px; padding: 14px 16px; }
	.lt-list-table tbody tr.is-latest { border-color: #f5c542; background: rgba(245,197,66,0.06); }
	.lt-list-table tbody th, .lt-list-table tbody td { display: block; padding: 0; text-align: left; }

	/* 라벨(data-label)은 모두 숨김 */
	.lt-list-table td::before { display: none; }

	/* 회차(좌)·추첨일(우) 한 줄. 회차 셀은 flex 로 숫자·뱃지를 세로 가운데 정렬 */
	.lt-list-table tbody th.c-round { float: left; width: auto; display: flex; align-items: center; gap: 8px; }
	.lt-list-table tbody th.c-round .lt-list-round { font-size: 15px; }
	.lt-list-table tbody th.c-round .lt-list-badge { margin: 0; }
	.lt-list-table td.c-date { float: right; text-align: right; padding-top: 3px; }

	/* 당첨번호: 회차/추첨일 줄 아래로. 볼을 가운데 정렬 + 고정 간격(좌우 대칭·간격 과다 방지) */
	.lt-list-table td.c-nums { clear: both; padding: 14px 0 12px; }
	.lt-list-table td.c-nums .lt-list-balls { justify-content: center; gap: 6px; }
	.lt-list-table td.c-nums .lt-ball-sm { width: 30px; height: 30px; font-size: 12px; }
	.lt-list-table td.c-nums .lt-list-plus { font-size: 14px; margin: 0; }

	/* 당첨금(좌)·당첨자수(우): 한 줄에 좌우 배치 */
	.lt-list-table td.c-prize, .lt-list-table td.c-winners { width: 50%; padding: 10px 0 0; border-top: 1px solid #1b2a4e; }
	.lt-list-table td.c-prize { float: left; text-align: left; }
	.lt-list-table td.c-winners { float: right; text-align: right; }
	.lt-list-table tbody tr::after { content: ""; display: block; clear: both; }   /* float 해제 */
}