* { 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; }
/* 배너가 숨겨져 있을 때 버튼이 왼쪽으로 딸려오지 않도록 */
.topbar .hallbtn { flex: 0 0 auto; margin-left: auto; }

/* ===== 모달: 명예의 전당 ===== */
.hallbtn { background: #ffb300; padding: 7px 14px; font-size: 13px; }
.hallbtn:hover { background: #ffa000; }

.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; }

.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; }

.modal-body { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); 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; }

.halllist .winrow { margin-bottom: 6px; padding: 8px 10px; }

@media (max-width: 1100px) {
  .modal-backdrop { padding: 12px; }
  .modal-body { grid-template-columns: 1fr; overflow-y: auto; }
  .hallcol { overflow-y: visible; margin-bottom: 16px; }
}

/* ===== 폰 화면(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;
    align-items: center;
    column-gap: 12px;
    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 .hallbtn { grid-column: 2; grid-row: 1; margin-left: 0; padding: 8px 16px; }
  .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 h1 { font-size: 18px; margin-bottom: 2px; }
  .topbar .hallbtn { font-size: 12px; padding: 7px 11px; }
  .topbar .sub { font-size: 12px; margin-bottom: 14px; }
}