* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', 'Malgun Gothic', sans-serif; background: #f4f6fb; color: #222; padding: 24px; }
/* 화면 높이에 맞춰 고정하고, 각 열이 내부에서만 스크롤되도록 한다 */
html, body { height: 100%; }
body { overflow: hidden; }

.wrap { max-width: 1800px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; min-height: 0; }

/* 2단 레이아웃: 왼쪽=생성, 오른쪽=분석 */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 20px;
  flex: 1;          /* 헤더를 제외한 남은 높이를 모두 사용 */
  min-height: 0;    /* 자식이 넘칠 때 축소되도록 (grid/flex 필수) */
}

.col-left, .col-right {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
}

/* 스크롤바 스타일 */
.col-left::-webkit-scrollbar, .col-right::-webkit-scrollbar { width: 10px; }
.col-left::-webkit-scrollbar-track, .col-right::-webkit-scrollbar-track { background: #eceff7; border-radius: 8px; }
.col-left::-webkit-scrollbar-thumb, .col-right::-webkit-scrollbar-thumb { background: #c3cadb; border-radius: 8px; }
.col-left::-webkit-scrollbar-thumb:hover, .col-right::-webkit-scrollbar-thumb:hover { background: #a7b0c6; }
.col-left, .col-right { scrollbar-width: thin; scrollbar-color: #c3cadb #eceff7; }

/* 마지막 카드 아래 여백 */
.col-left > .card:last-child, .col-right > .card:last-child { margin-bottom: 4px; }

@media (max-width: 1100px) {
  body { overflow: auto; }
  .wrap { height: auto; display: block; }
  .layout { grid-template-columns: 1fr; display: block; }
  .col-left, .col-right { height: auto; overflow-y: visible; padding-right: 0; }
}

/* ===== 애드핏 광고 슬롯 =====
   실제 ins 태그는 index.html 하단 스크립트가 화면 폭에 따라 골라서 넣는다.
   여기서는 자리와 정렬만 담당한다. */
.adslot { display: flex; justify-content: center; margin-bottom: 16px; }
/* ins가 안 들어간 슬롯(반대편 기기용)은 여백도 차지하지 않도록 접는다.
   :empty가 .adslot보다 명시도가 높아 미디어쿼리 선언보다 우선 적용된다 */
.adslot:empty { display: none; }
.adslot-mobile { display: none; }

@media (max-width: 1100px) {
  .adslot-pc { display: none; }
  /* 데이터 요약(.sub)과 배너 사이에 들어간다.
     위쪽은 .sub 여백으로 충분하므로 아래 간격만 잡아 준다. */
  .adslot-mobile { display: flex; margin: 0 0 16px; }
}

/* ===== 면책 고지 =====
   .wrap이 flex 컬럼이고 .layout이 flex:1이므로, 푸터는 줄어들지 않도록 flex 고정.
   (데스크톱은 body overflow:hidden이라 푸터가 화면 맨 아래에 항상 붙어 있는다)

   데스크톱은 화면 높이가 고정이라 푸터가 먹는 세로 공간이 곧 컬럼 스크롤 영역의 손실이다.
   반대로 가로 폭은 남아도므로 문단을 세로로 쌓지 않고 가로로 이어 붙인다 (5줄 → 2줄).

   flex 로 붙이지 않고 문단을 inline 으로 흘리는 이유:
   flex 는 아이템(=문단) 통째로만 줄을 넘겨서, 긴 문단 하나가 안 들어가면 그 줄 뒤가
   통째로 비고 3줄이 된다. inline 이면 단어 단위로 끊겨 줄을 꽉 채운다.
   1101px 같은 좁은 PC 폭에서 차이가 크다. */
.disclaimer {
  flex: 0 0 auto;
  margin-top: 8px;
  padding: 7px 12px 5px;
  border-top: 1px solid #dfe3ee;
  font-size: 11.5px;
  line-height: 1.55;
  color: #7a8296;
}
/* 문단을 한 줄기 텍스트로 흘린다. 항목 경계는 뒤에 붙는 가운뎃점이 맡는다. */
.disclaimer p { display: inline; margin: 0; }
.disclaimer p:not(:last-child)::after { content: ' · '; color: #c3cadb; }
.disclaimer strong { color: #5a6274; font-weight: 700; }
.disclaimer .help { color: #99a0b0; }
.disclaimer a { color: #7a8296; }
/* 개인정보처리방침 링크 — 법정 공개 항목이라 다른 문구보다 눈에 띄어야 한다 */
.disclaimer a.policy { color: #3949ab; text-decoration: underline; }
.disclaimer a.policy strong { color: #3949ab; }
/* 19세 이용불가 마크 */
.disclaimer .age {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: #c62828; color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: -.5px;
  vertical-align: -3px; margin-right: 3px;
}

/* 화면 폭별 조정은 기본 규칙을 모두 선언한 뒤 파일 맨 아래에서 한다.
   미디어쿼리는 명시도를 올려 주지 않으므로, 같은 선택자를 덮어쓰려면
   반드시 기본 규칙보다 뒤에 있어야 한다. → 파일 끝의 "화면 폭별 조정" 참고 */

/* ===== 문서 페이지 (개인정보처리방침 등) =====
   메인은 화면 높이에 고정된 2단 레이아웃이라 body 스크롤을 잠가 두었다.
   길게 이어지는 문서에서는 그 잠금을 풀어야 한다. */
body.docpage { overflow: auto; height: auto; }

.doc {
  max-width: 860px; margin: 0 auto; background: #fff; border-radius: 12px;
  padding: 36px 40px 44px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
  font-size: 14px; line-height: 1.75; color: #333;
}
.doc h1 { font-size: 26px; margin-bottom: 14px; }
.doc h2 { font-size: 17px; margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid #eceff7; }
.doc h2:first-of-type { border-top: none; padding-top: 0; }
.doc p { margin-bottom: 12px; }
.doc ul { margin: 0 0 14px 20px; }
.doc li { margin-bottom: 6px; }
.doc a { color: #3949ab; }
.doc code { background: #f0f2f8; border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.doc .lead { color: #556; }
.doc .hint { font-size: 12.5px; color: #77809a; }
.doc .docnav { font-size: 13px; }
.doc .agency li { font-size: 13px; }
.doc .effective { margin-top: 26px; padding-top: 14px; border-top: 1px solid #eceff7;
                  font-size: 13px; color: #667; }

/* 강조 안내 블록 */
.doc .notice { background: #f5f7ff; border-left: 3px solid #5c6bc0; border-radius: 0 8px 8px 0;
               padding: 12px 16px; color: #444; }

/* 문서용 표 */
.doc .dtable { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 13px; }
.doc .dtable th, .doc .dtable td { border: 1px solid #e2e6f0; padding: 9px 12px;
                                   text-align: left; vertical-align: top; }
.doc .dtable thead th { background: #f4f6fb; font-weight: 700; color: #445; white-space: nowrap; }
.doc .dtable tbody th { background: #f8f9fd; font-weight: 700; color: #445; width: 110px; white-space: nowrap; }

@media (max-width: 700px) {
  .doc { padding: 22px 18px 30px; border-radius: 10px; }
  .doc h1 { font-size: 22px; }
  .doc .dtable { font-size: 12.5px; }
  .doc .dtable th, .doc .dtable td { padding: 7px 8px; }
}

/* 최신 회차 당첨번호 */
.card.latest { background: linear-gradient(135deg, #fffdf5, #fff7e6); border: 1px solid #ffe0a3; }
.latestballs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.latestballs .ball { width: 46px; height: 46px; min-width: 46px; font-size: 17px; }
.latestballs .plus { color: #99a; font-weight: 700; margin: 0 2px; }
.latestballs .bonus-label { font-size: 11px; color: #889; margin-left: 4px; }
h1 { font-size: 24px; margin-bottom: 4px; }
.sub { color: #667; font-size: 13px; margin-bottom: 20px; }
.card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.card h2 { font-size: 16px; margin-bottom: 12px; }
.legend { font-size: 12px; color: #667; margin-bottom: 10px; }
.legend span { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin: 0 4px 0 10px; }
.grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.num { padding: 10px 0; text-align: center; border-radius: 8px; border: 1px solid #dde; background: #fafbff; cursor: pointer; font-weight: 600; user-select: none; transition: all .1s; position: relative; }
.num:hover { border-color: #99b; }
.num.include { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.num.exclude { background: #c62828; color: #fff; border-color: #c62828; text-decoration: line-through; }
.num.hot::after { content: '🔥'; position: absolute; top: -6px; right: -2px; font-size: 10px; }
.num.top::after { content: '⭐'; position: absolute; top: -6px; right: -2px; font-size: 10px; }
.num.top { border-color: #f9a825; box-shadow: 0 0 0 2px #ffe082; }
.banner { font-size: 13px; padding: 8px 14px; border-radius: 8px; margin-bottom: 16px; display: none; }
/* 상태 클래스가 붙어야 보인다. 세 클래스 모두 같은 flex 레이아웃을 쓴다
   (왼쪽=회차 메시지, 오른쪽=방문자 수). */
.banner.ok, .banner.new, .banner.fail {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 2px 14px;
}
.banner.ok { background: #e8f5e9; color: #2e7d32; }
.banner.new { background: #fff8e1; color: #b26a00; }
.banner.fail { background: #fdecea; color: #c62828; }
/* 메시지가 길면 줄바꿈되며 방문자 수를 아래로 밀어낸다 */
.banner-msg { flex: 1 1 auto; min-width: 0; }
/* 방문자 수는 숫자 중간에서 끊기지 않게 한 덩어리로 유지.
   색은 배너 상태색(초록/주황/빨강)을 그대로 물려받되 한 톤 흐리게 둔다. */
.banner-visitors { flex: 0 0 auto; white-space: nowrap; opacity: .72; }
.banner-visitors strong { font-weight: 700; }
/* 좁은 화면: 2줄로 쌓고 둘 다 왼쪽 정렬 */
@media (max-width: 700px) {
  .banner.ok, .banner.new, .banner.fail { flex-direction: column; align-items: flex-start; gap: 3px; }
  .banner-visitors { white-space: normal; }
}
.topballs { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.topballs .ball { width: 52px; height: 52px; min-width: 52px; font-size: 20px; }
.topdesc { font-size: 13px; color: #667; margin-left: 8px; flex: 1 1 160px; min-width: 0; }
.minibtn { background: #2e7d32; color: #fff; border: none; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
/* 6개가 항상 한 줄에 들어가도록 균등 6열 그리드 */
.poscols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.poscol { min-width: 0; text-align: center; background: #f8f9fd; border: 1px solid #e3e6f0; border-radius: 10px; padding: 8px 3px; }
.poscol .plabel { font-size: 11px; color: #889; margin-bottom: 5px; font-weight: 600; }
.poscol .ball { width: 34px; height: 34px; min-width: 34px; font-size: 13px; margin: 0 auto 6px; }
.poscol .cand { font-size: 10px; color: #667; line-height: 1.6; white-space: nowrap; font-weight: 600; }
.poscol .cand em { font-style: normal; color: #a0a7ba; font-weight: 400; }
.posfoot { display: flex; align-items: center; margin-top: 12px; font-size: 13px; color: #667; }
.rtable { border-collapse: collapse; width: 100%; max-width: 420px; font-size: 13px; }
.rtable th, .rtable td { border: 1px solid #e3e6f0; padding: 6px 12px; text-align: center; }
.rtable th { background: #f8f9fd; color: #556; }
.rtable td.strong { font-weight: 700; color: #1a56db; }
.rpat { font-size: 12px; color: #889; margin-top: 10px; line-height: 1.7; }
.rcrow { margin-top: 12px; gap: 10px; }
.rcrow .rclabel { font-size: 13px; color: #667; }
.rcrow label { font-size: 13px; color: #445; }
.controls input.rc { width: 48px; padding: 5px; }
.rchint { font-size: 12px; color: #99a; margin-top: 6px; }
.ok-msg { color: #2e7d32; font-size: 14px; margin-top: 10px; }
.controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.controls label { font-size: 14px; }
.controls input[type=number] { width: 64px; padding: 6px; border: 1px solid #ccd; border-radius: 6px; }
.btn { background: #1a56db; color: #fff; border: none; padding: 10px 22px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn:hover { background: #1444af; }
.btn.gray { background: #78808c; }
/* 엑셀 생성 중에는 버튼을 눌러도 반응하지 않는다는 걸 눈에 보이게 */
.btn:disabled, .btn:disabled:hover { background: #aab; cursor: default; }
.error { color: #c62828; font-size: 14px; margin-top: 10px; }
.game { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.game .label { width: 32px; color: #889; font-size: 12px; font-weight: 600; text-align: right; padding-right: 4px; flex: 0 0 auto; }
/* flex 컨테이너 안에서 가로가 눌려 타원이 되지 않도록 크기 고정 */
.ball { width: 40px; height: 40px; min-width: 40px; flex: 0 0 auto; box-sizing: border-box; aspect-ratio: 1 / 1;
        border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;
        box-shadow: inset -3px -3px 6px rgba(0,0,0,.2); }
.b1 { background: #fbc400; } .b2 { background: #69c8f2; } .b3 { background: #ff7272; } .b4 { background: #aaa; } .b5 { background: #b0d840; }
.ball.fixed { outline: 3px solid #2e7d32; }
.hotlist { display: flex; flex-wrap: wrap; gap: 8px; }
.hotchip { background: #fff3e0; border: 1px solid #ffb74d; border-radius: 16px; padding: 4px 12px; font-size: 13px; font-weight: 600; }

/* 당첨 내역 */
.winrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; border-radius: 10px;
          background: #f8f9fd; border: 1px solid #e3e6f0; margin-bottom: 8px; }
.winrow .ball { width: 30px; height: 30px; min-width: 30px; font-size: 12px; }
.winrow .ball.hit { outline: 3px solid #2e7d32; }
.winrow .who { font-size: 12px; color: #667; font-weight: 600; flex: 0 0 auto; }
.winrow .detail { font-size: 11px; color: #99a; flex-basis: 100%; }
.rankbadge { font-size: 12px; font-weight: 700; color: #fff; border-radius: 14px; padding: 3px 10px; flex: 0 0 auto; }
.rank1 { background: #d32f2f; } .rank2 { background: #e65100; } .rank3 { background: #f9a825; }
.rank4 { background: #388e3c; } .rank5 { background: #1976d2; }
.nowin { font-size: 13px; color: #889; }

/* ===== 닉네임 ===== */
.nickrow { align-items: center; margin-bottom: 10px; }
.nicklabel input { width: 180px; padding: 6px 10px; border: 1px solid #cdd3e3; border-radius: 8px;
                   font-size: 14px; font-family: inherit; }
.nicklabel input:focus { outline: none; border-color: #5c6bc0; box-shadow: 0 0 0 3px rgba(92,107,192,.15); }
.nickhint { font-size: 11px; color: #99a; }

/* 닉네임 누적 생성 건수 배지 */
.nickcount { font-size: 12px; font-weight: 700; color: #1a56db; background: #eaf0fe;
             border: 1px solid #c7d6f8; border-radius: 14px; padding: 4px 11px;
             flex: 0 0 auto; white-space: nowrap; }
.nickcount[hidden] { display: none; }
.nickcount.zero { color: #7a8296; background: #f0f2f8; border-color: #dfe3ee; }

/* 개인정보 패턴 경고 (전화번호·계좌번호 등). 뜨는 동안 생성 버튼이 잠긴다. */
.nickerr { font-size: 12px; font-weight: 700; color: #b3261e; background: #fdecea;
           border: 1px solid #f5c2bd; border-radius: 8px; padding: 5px 11px;
           flex: 0 0 auto; }
.nickerr[hidden] { display: none; }
.nicklabel input.invalid { border-color: #e57373; background: #fffafa; }
.nicklabel input.invalid:focus { border-color: #d32f2f; box-shadow: 0 0 0 3px rgba(211,47,47,.15); }

/* 당첨자 닉네임 배지 (당첨 내역 맨 왼쪽) */
.nickbadge { font-size: 12px; font-weight: 700; color: #3b3f58; background: #e8ecfb; border: 1px solid #c9d2f0;
             border-radius: 14px; padding: 3px 10px; flex: 0 0 auto; max-width: 130px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 상단 바 =====
   PC: 제목 · 데이터 요약 · 최신화 배너 · 방문자 · 명예의전당 버튼을 한 줄에 넣는다.
       세로로 쌓으면 3줄(약 150px)이 되는데, 화면 높이 고정 레이아웃에서는
       그만큼 좌우 컬럼의 스크롤 영역이 깎인다. 가로 폭은 남으므로 한 줄이 이득이다.
   모바일: 아래 미디어쿼리에서 grid 로 원래의 세로 배치로 되돌린다.
   버튼은 DOM 상 마지막이라 PC 에서는 자연스럽게 오른쪽 끝에 온다. */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.topbar h1 { flex: 0 0 auto; font-size: 20px; margin-bottom: 0; white-space: nowrap; }
/* 요약 문구는 길면 말줄임. 배너 자리를 뺏지 않도록 기본 크기를 작게 잡는다 */
.topbar .sub { flex: 0 1 auto; margin-bottom: 0; font-size: 12px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 배너는 남는 가로 공간을 모두 먹는다. 숨김 상태(display:none)면 아예 빠진다 */
.topbar .banner { flex: 1 1 auto; margin-bottom: 0; padding: 6px 12px; }
/* 배너가 숨겨져 있을 때 버튼이 왼쪽으로 딸려오지 않도록 margin-left:auto 를 준다.
   두 버튼 중 앞선 것(사용법)에만 걸어야 둘이 붙어서 오른쪽 끝으로 간다. */
.topbar .howbtn  { flex: 0 0 auto; margin-left: auto; }
.topbar .hallbtn { flex: 0 0 auto; }

/* ===== 상단 버튼 ===== */
.hallbtn { background: #ffb300; padding: 7px 14px; font-size: 13px; }
.hallbtn:hover { background: #ffa000; }
/* 명예의 전당(노랑)과 구분되도록 파랑 계열. 크기·모양은 동일하게 맞춘다 */
.howbtn { background: #3b82f6; padding: 7px 14px; font-size: 13px; }
.howbtn:hover { background: #2563eb; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(20, 24, 40, .55); z-index: 1000;
                  display: flex; align-items: center; justify-content: center; padding: 32px; }
.modal-backdrop[hidden] { display: none; }
/* 모달이 열려 있는 동안 뒤쪽 페이지 스크롤 잠금 (좁은 화면에서 body가 스크롤되는 것 방지) */
body.modal-open { overflow: hidden; }

.modal { background: #fff; border-radius: 14px; padding: 20px 24px 20px; width: 100%; max-width: 1200px;
         max-height: 100%; display: flex; flex-direction: column; min-height: 0;
         box-shadow: 0 12px 40px rgba(0,0,0,.28); border-top: 4px solid #ffd54f; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-head h2 { font-size: 18px; margin-bottom: 4px; }
.modal .sub { margin-bottom: 14px; }
.modal h3 { font-size: 13px; color: #556; margin-bottom: 8px; }
/* h3 옆에 붙는 범위 표기. 제목보다 약하게 보여야 제목을 가리지 않는다 */
.modal h3 .hsub { font-weight: 400; color: #98a0b5; font-size: 12px; }

.modal-close { background: none; border: none; font-size: 26px; line-height: 1; color: #99a;
               cursor: pointer; padding: 0 4px; border-radius: 8px; }
.modal-close:hover { color: #444; background: #f0f2f8; }

/* 왼쪽(순위표+회차별 상세)이 조건 문구 때문에 더 넓어야 한다. 오른쪽은 공 7개 + 회차/날짜면 충분. */
.modal-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 24px;
              flex: 1; min-height: 0; }
.hallcol { min-width: 0; min-height: 0; overflow-y: auto; padding-right: 6px; }
.hallcol::-webkit-scrollbar { width: 8px; }
.hallcol::-webkit-scrollbar-track { background: #eceff7; border-radius: 8px; }
.hallcol::-webkit-scrollbar-thumb { background: #c3cadb; border-radius: 8px; }
.hallcol { scrollbar-width: thin; scrollbar-color: #c3cadb #eceff7; }

.htable { width: 100%; border-collapse: collapse; font-size: 12px; }
.htable th, .htable td { padding: 6px 8px; text-align: center; border-bottom: 1px solid #eef0f7; }
.htable th { color: #778; font-weight: 600; background: #f8f9fd; position: sticky; top: 0; z-index: 1; }
.htable td.nickcell { text-align: left; font-weight: 700; color: #3b3f58;
                      max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htable tr.first td { background: #fffbe9; }
.htable tr.first td.nickcell::before { content: '👑 '; }
.htable td.nowin { text-align: center; padding: 16px; }

/* ===== 추천 옵션 ===== */
.h2sub { font-size: 12px; font-weight: 400; color: #98a0b5; margin-left: 6px; }
.recobtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.recobtn { background: #fff; color: #3b3f58; border: 1.5px solid #c3cadb; padding: 8px 12px; border-radius: 20px;
           font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.recobtn:hover { border-color: #c62828; color: #c62828; }
.recobtn.on { background: #c62828; border-color: #c62828; color: #fff; }
.recobtn .cnt { font-weight: 400; opacity: .8; font-size: 11.5px; margin-left: 4px; }
.recoinfo { margin: 0 0 10px; line-height: 1.6; }
.recoinfo .warn { color: #c62828; font-weight: 700; }
#recoCard .controls { margin-top: 4px; }

/* 검증 모달 */
.modal-bt { max-width: 860px; border-top-color: #c62828; }
.modal-body.btbody { display: block; overflow-y: auto; padding-right: 6px; }
#btTable td.optcell { text-align: left; font-weight: 600; color: #3b3f58; white-space: nowrap; }
#btTable tr.base td { background: #f3f5fb; color: #667; }
#btTable tr.combo td { background: #fff5f5; }
#btTable td.better { color: #2e7d32; font-weight: 700; }
#btTable td.worse { color: #c62828; font-weight: 700; }
.btnote { margin-top: 12px; line-height: 1.6; }

/* 순위표 닉네임 행: 클릭하면 아래에 회차별 상세 행이 펼쳐진다 */
.htable tr.rankrow { cursor: pointer; }
.htable tr.rankrow:hover td { background: #f3f5fb; }
.htable tr.rankrow td.nickcell::after { content: ' ▸'; color: #b0b6c8; font-size: 11px; }
.htable tr.rankrow.open td.nickcell::after { content: ' ▾'; }
.htable tr.detail td { padding: 0 0 10px; background: #fafbfe; text-align: left; }

/* 회차별 상세 표 (순위 행 아래) */
.rtable-detail { width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 0; }
.rtable-detail th, .rtable-detail td { padding: 5px 8px; border-bottom: 1px solid #eef0f7; text-align: center; vertical-align: top; }
.rtable-detail th { color: #889; font-weight: 600; background: #f2f4fa; position: static; }
.rtable-detail td.condcell { text-align: left; color: #556; }
.rtable-detail td.condcell .conds { min-width: 0; }
.rtable-detail td.condcell .conds div { margin-bottom: 2px; }
.rtable-detail td.condcell .cwin { color: #2e7d32; font-weight: 700; }
.rtable-detail td.condcell .cnone { color: #aab; }
.rtable-detail .win { color: #d84315; font-weight: 700; }
.rtable-detail .pend { color: #aab; }

/* 회차별 당첨번호 목록 */
.histrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 10px;
           border-radius: 10px; background: #f8f9fd; margin-bottom: 5px; }
.histrow .hround { font-size: 12px; font-weight: 700; color: #3b3f58; min-width: 58px; }
.histrow .hdate { font-size: 11px; color: #99a; min-width: 74px; }
.histrow .ball { width: 28px; height: 28px; min-width: 28px; font-size: 11.5px; }
.histrow .plus { color: #99a; font-size: 12px; margin: 0 2px; }
.histmore { width: 100%; margin-top: 6px; font-size: 12px; }

@media (max-width: 1100px) {
  .modal-backdrop { padding: 12px; }
  /* grid 를 유지하면 높이가 모달 안에 갇힌 채 두 행이 남는 높이를 나눠 갖는다.
     순위 행을 펼쳐 왼쪽이 길어지면 표가 자기 칸(행)을 넘어 오른쪽 목록 위로 겹쳤다.
     block 으로 바꿔 위→아래로 쌓고 .modal-body 전체가 스크롤되게 한다. */
  .modal-body { display: block; overflow-y: auto; }
  .hallcol { overflow-y: visible; margin-bottom: 16px; }
}

/* ===== 모달: 사용법 =====
   명예의 전당은 표 두 개를 나란히 놓느라 1200px 를 쓰지만, 읽는 글은 한 줄이 길면
   눈이 되돌아올 자리를 놓친다. 폭을 줄이고 한 칸짜리로 되돌린다.
   .modal-body 는 grid 라서 .howbody 로 명시도를 올려 덮어쓴다 (미디어쿼리 순서 무관). */
/* 명예의 전당 위에서 열릴 수 있으므로 한 단계 위에 둔다 (둘 다 z-index:1000 이면 DOM 순서로 밀린다) */
#howModal { z-index: 1010; }
.modal-narrow { max-width: 620px; border-top-color: #3b82f6; }
.modal-body.howbody { display: block; overflow-y: auto; padding-right: 6px; }
.howbody::-webkit-scrollbar { width: 8px; }
.howbody::-webkit-scrollbar-track { background: #eceff7; border-radius: 8px; }
.howbody::-webkit-scrollbar-thumb { background: #c3cadb; border-radius: 8px; }
.howbody { scrollbar-width: thin; scrollbar-color: #c3cadb #eceff7; }

/* 번호(동그라미) + 본문 2열. 번호는 줄어들지 않게 고정폭 */
.howsteps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.howsteps > li { display: flex; gap: 12px; align-items: flex-start;
                 padding: 12px 0; border-bottom: 1px solid #eef0f7; }
.howsteps > li:last-child { border-bottom: none; }
.hownum { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
          background: #3b82f6; color: #fff; font-size: 13px; font-weight: 700;
          display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.howtext { min-width: 0; }
/* .modal h3 (12px·회색)를 덮어쓴다 — 단계 제목은 본문보다 커야 눈에 걸린다 */
.modal .howtext h3 { font-size: 15px; color: #2b2f45; margin: 0 0 4px; }
.howtext p { font-size: 13.5px; line-height: 1.7; color: #444a60; margin: 0 0 4px; }
.howtext p:last-child { margin-bottom: 0; }
.howtext b { color: #1f2437; }
/* 부가 설명 — 본문보다 한 톤 죽여서 "안 읽어도 되는 줄"임을 보여 준다 */
.howtip { font-size: 12.5px; color: #6b7186; background: #f6f7fb;
          border-radius: 8px; padding: 7px 10px; margin-top: 6px; }

/* 색 3단계 설명. 실제 숫자판 색과 같은 값을 써야 대조하며 읽힌다 */
.howchips { list-style: none; margin: 8px 0 4px; padding: 0;
            display: flex; flex-wrap: wrap; gap: 6px 14px; }
.howchips li { display: flex; align-items: center; gap: 6px;
               font-size: 12.5px; color: #555b70; }
.howchip { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; font-weight: 700;
           display: flex; align-items: center; justify-content: center; }
.chip-none { background: #f2f4fa; color: #555; border: 1px solid #dfe3ee; }
.chip-in   { background: #2e7d32; color: #fff; }
.chip-out  { background: #c62828; color: #fff; }

/* 사행산업 관련 고지는 푸터에도 있지만, 모달을 열면 푸터가 가려지므로 여기에도 둔다 */
.hownote { margin-top: 14px; padding: 12px 14px; border-radius: 10px;
           background: #fff8e6; border: 1px solid #ffe0a3;
           font-size: 12.5px; line-height: 1.7; color: #6b5320; }

@media (max-width: 480px) {
  .modal-narrow { padding: 16px 16px 16px; }
  .howsteps > li { gap: 10px; padding: 10px 0; }
  .modal .howtext h3 { font-size: 14px; }
  .howtext p { font-size: 13px; }
}

/* ===== 폰 화면(360px 등) =====
   가로로 6칸을 늘어놓는 두 영역이 카드 폭을 넘던 문제를 잡는다.
   폭 360px 기준으로 카드 안쪽은 272px 뿐이다. */
@media (max-width: 480px) {
  /* 생성 결과: 라벨 32 + 공 40×6 + 간격 8×6 = 320px 라 48px 넘쳤다.
     공을 고정폭 대신 남는 폭을 나눠 갖게 바꾼다 (원래 크기 40px는 넘지 않는다). */
  .game { gap: 5px; }
  .game .label { width: 24px; padding-right: 2px; }
  .game .ball {
    flex: 1 1 0;
    width: auto; min-width: 0; max-width: 40px;
    height: auto;            /* aspect-ratio가 정사각형을 유지해 준다 */
    font-size: 14px;
  }

  /* 자리별 최적 조합: 6열이면 한 칸이 40px라 34px 공과 테두리·여백이 칸을 넘쳤다.
     3열 2줄로 접는다 (1~6번째 순서는 그대로 읽힌다). */
  .poscols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .poscol { padding: 8px 4px; }
}

/* ==========================================================================
   화면 폭별 조정 (반드시 파일 맨 아래)

   미디어쿼리는 명시도를 올려 주지 않는다. 같은 선택자를 덮어쓰려면 기본 규칙보다
   뒤에 있어야 하므로, 폭에 따라 값을 바꾸는 규칙은 전부 여기에 모아 둔다.
   위쪽 미디어쿼리들은 "그 폭에서만 존재하는" 규칙(광고 슬롯 노출 등)이라 그대로 둔다.
   ========================================================================== */

/* ----- PC: 세로 공간 압축 -----
   1101px 이상은 body overflow:hidden 으로 화면 높이에 갇혀 있어,
   바깥 여백 1px 이 곧 좌우 컬럼 스크롤 영역 1px 이다.
   가로 폭은 1800px까지 남아돌므로 세로만 줄인다. */
@media (min-width: 1101px) {
  body { padding: 14px 16px; }
  .card { padding: 16px; margin-bottom: 12px; }
  .card h2 { margin-bottom: 10px; }
  .adslot { margin-bottom: 12px; }
}

/* ----- 모바일: 상단 바를 세로 배치로 되돌린다 -----
   DOM 순서는 제목 → 요약 → 광고 → 배너 → 버튼이지만,
   버튼만 grid 로 1행 2열(제목 오른쪽)에 끌어올려 원래 화면과 같게 만든다. */
@media (max-width: 1100px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 0;
  }
  /* word-break: keep-all — 한글은 기본값(normal)이면 글자 단위로 끊겨
     "로또 번호 생 / 성기" 처럼 단어 중간에서 갈라진다. 어절 단위로만 끊는다. */
  .topbar h1 { grid-column: 1; grid-row: 1; font-size: 24px; margin-bottom: 4px;
               white-space: normal; word-break: keep-all; min-width: 0; }
  .topbar .howbtn  { grid-column: 2; grid-row: 1; margin-left: 0; padding: 8px 12px;
                     white-space: nowrap; }
  .topbar .hallbtn { grid-column: 3; grid-row: 1; margin-left: 0; padding: 8px 14px;
                     white-space: nowrap; }
  .topbar .sub { grid-column: 1 / -1; grid-row: 2; font-size: 13px; margin-bottom: 20px;
                 overflow: visible; text-overflow: clip; white-space: normal; }
  .topbar .adslot-mobile { grid-column: 1 / -1; grid-row: 3; }
  .topbar .banner { grid-column: 1 / -1; grid-row: 4; margin-bottom: 16px; padding: 8px 14px; }

  /* 푸터도 원래대로 한 줄에 한 항목씩 쌓는다 (세로 스크롤이 자유롭다) */
  .disclaimer {
    margin-top: 20px; padding: 14px 4px 24px;
    font-size: 11.5px; line-height: 1.6;
  }
  .disclaimer p { display: block; }
  .disclaimer p + p { margin-top: 2px; }
  .disclaimer p:not(:last-child)::after { content: none; }
}

/* ----- 폰 화면(360px 등): 상단 한 줄 유지 -----
   360px 에서 가용 폭은 body 패딩을 빼면 312px 뿐이다.
   제목 24px + "명예의 전당" 버튼 13px 를 그대로 두면 제목이 두 줄로 접히면서
   버튼과 세로로 어긋난다. 둘 다 한 단계씩 줄여 한 줄에 들어가게 한다.
   (이 블록은 위 1100px 블록보다 뒤에 있어야 덮어쓴다) */
@media (max-width: 480px) {
  body { padding: 14px 12px; }
  .topbar { column-gap: 6px; }
  .topbar h1 { font-size: 18px; margin-bottom: 2px; }
  /* 버튼이 둘로 늘어난 만큼 폭을 더 짜낸다. 360px 기준 가용 312px 중
     버튼 둘이 약 165px 를 쓰고 나머지가 제목 몫이다 (제목은 어절 단위로 접힌다). */
  .topbar .howbtn  { font-size: 11.5px; padding: 7px 8px; }
  .topbar .hallbtn { font-size: 11.5px; padding: 7px 9px; }
  .topbar .sub { font-size: 12px; margin-bottom: 14px; }
}

/* ----- 아주 좁은 폰(320~380px): 버튼 이모지를 뗀다 -----
   버튼이 둘로 늘면서 제목 몫이 110px 아래로 떨어진다. 이모지 하나가 약 18px 이라
   둘을 빼면 제목이 다시 두 줄 안에 들어온다. 의미는 글자가 이미 다 담고 있다.
   grid 의 첫 칸이 minmax(0,1fr) 이라 최악의 경우에도 넘치지는 않지만,
   제목이 세 줄로 접히면 상단이 그만큼 두꺼워진다. */
@media (max-width: 380px) {
  .topbar .bemoji { display: none; }
  .topbar h1 { font-size: 17px; }
}

/* ----- 폰 화면: 명예의 전당 -----
   순위표는 8칸이라 360px(모달 안쪽 ≈ 290px)에서 칸 여백만 128px 를 먹는다.
   여기에 순위 행을 누르면 5칸짜리 상세 표가 colspan 안에 또 들어가는데, 조건 문구가
   길어 안쪽 표의 최소 폭이 바깥 표를 밀어 넓히고 모달 밖으로 삐져나갔다.
   → 바깥 표는 여백을 줄이고, 안쪽 표는 표를 버리고 회차별 카드로 세로 배치한다.
     (칸 이름은 lotto.js 가 data-label 로 넣어 준다) */
@media (max-width: 700px) {
  .modal { padding: 16px 14px; }
  .modal-head h2 { font-size: 16px; }
  .htable { font-size: 11.5px; }
  .htable th, .htable td { padding: 6px 3px; }
  .htable td.nickcell { max-width: 84px; }
  .htable tr.detail td { padding: 6px 0 10px; }

  /* 상세 표 → 카드. thead 는 없애고 tr 하나가 카드 하나 */
  .rtable-detail,
  .rtable-detail tbody,
  .rtable-detail tr,
  .rtable-detail td { display: block; width: 100%; box-sizing: border-box; }
  .rtable-detail thead { display: none; }
  .rtable-detail { font-size: 12px; overflow-wrap: anywhere; word-break: keep-all; }
  .rtable-detail tr { background: #fff; border: 1px solid #e6e9f2; border-radius: 8px;
                      padding: 6px 10px 8px; margin-bottom: 6px; }
  .rtable-detail tr:last-child { margin-bottom: 0; }
  .rtable-detail td { display: flex; align-items: flex-start; gap: 8px;
                      text-align: left; padding: 3px 0; border-bottom: none; }
  /* 칸 이름을 앞에 붙인다. 폭을 고정해 값이 세로로 줄 맞춰 보이게 */
  .rtable-detail td::before { content: attr(data-label); flex: 0 0 30px;
                              color: #889; font-weight: 600; }
  /* 회차는 카드 제목 역할이라 이름 없이 굵게 */
  .rtable-detail td.roundcell { padding-bottom: 5px; margin-bottom: 3px;
                                border-bottom: 1px solid #eef0f7; font-size: 13px; }
  .rtable-detail td.roundcell::before { content: none; }
  .rtable-detail td.condcell .conds { flex: 1 1 auto; }
}