/* lotto_generator 페이지 전용 CSS — 2026-07-30 인라인 <style>에서 외부화(방침: 인라인 제거 → assets/css/<slug>/<slug>.css).
   공통 컴포넌트는 common.css가 담당하며 여기엔 이 페이지(클러스터) 고유 규칙만 둔다. */
:root{--gold:#d4af37}

#lotto-tool{max-width:var(--max-width);margin:0 auto;padding:28px 16px 72px;color:var(--text-main);}
.btn-main:disabled{opacity:0.6;cursor:not-allowed;transform:none;}
.tip-box{max-width:900px;margin:12px auto 0;padding:12px 15px;border-radius:12px;background:rgba(var(--blue-rgb),0.05);border:1px solid rgba(var(--blue-rgb),0.08);}
/* 로또 번호 생성 영역 */
.lotto-wrapper{max-width:900px;margin:20px auto 0;padding:20px;background:rgba(var(--surface-rgb),0.9);border:1px solid rgba(var(--heading-rgb),0.06);border-radius:18px;box-shadow:var(--shadow-sm);}
.lotto-numbers{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin-bottom:20px;}
.lotto-line{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;}
.lotto-ball{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;font-size:1.1rem;font-weight:700;color:var(--surface);box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:transform 0.3s ease;}
.lotto-ball:hover{transform:scale(1.1);}
.lotto-ball.yellow{background:linear-gradient(135deg,#ffc107,#ff9800);}
.lotto-ball.blue{background:linear-gradient(135deg,#2196f3,#0d6efd);}
.lotto-ball.red{background:linear-gradient(135deg,#f44336,#dc3545);}
.lotto-ball.grey{background:linear-gradient(135deg,#9e9e9e,#6c757d);}
.lotto-ball.green{background:linear-gradient(135deg,#4caf50,#28a745);}
/* 당첨 볼의 무한 맥동 제거 — 금색 링으로 이미 구분되고, 여러 개가 동시에 뛰면 눈이 피로하다 */
.lotto-ball.matched{box-shadow:0 0 0 3px #ffd700,0 4px 12px rgba(0,0,0,0.15);}
.generate-actions{text-align:center;}

/* 최신 당첨번호 */
.winning-info{text-align:center;margin-bottom:16px;}
.winning-round{font-size:1.15rem;font-weight:700;color:var(--point);margin-bottom:8px;}
.winning-date{font-size:0.9rem;color:var(--text-sub);}
.winning-numbers{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;}
.bonus-separator{font-size:1.3rem;font-weight:700;color:var(--text-sub);margin:0 4px;}

/* 비교 결과 & 시뮬레이션 */
.match-line{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(var(--blue-rgb),0.1);}
.match-line:last-child{margin-bottom:0;border-bottom:0;}
.match-line-title{font-size:0.9rem;font-weight:600;color:var(--text-main);margin-bottom:6px;}
.match-count{display:inline-block;padding:2px 8px;background:rgba(var(--blue-rgb),0.1);border-radius:6px;font-size:0.85rem;font-weight:700;color:var(--blue);margin-left:6px;}
.match-count.high{background:rgba(var(--point-rgb),0.1);color:var(--point);}
.simulation-prize{padding:14px 16px;background:rgba(255,215,0,0.08);border:1px solid rgba(212,175,55,0.2);border-radius:12px;margin-top:12px;}
.prize-rank{font-size:1.1rem;font-weight:700;color:var(--gold);margin-bottom:8px;}
.prize-amount{font-size:0.95rem;color:var(--text-main);margin:4px 0;}
.prize-net{font-size:1.05rem;font-weight:700;color:var(--point);margin-top:8px;}

/* 실수령 계산기 */
.calc-group{margin-top:20px;}
.calc-row{margin-bottom:16px;}
.calc-row label{display:block;font-size:0.9rem;font-weight:600;color:var(--text-main);margin-bottom:6px;}
/* 정본 치수 사용(common.css --ck-field-h/r). 48/12 로 따로 두던 것을 맞췄다 */
.calc-row input{width:100%;height:52px;padding:0 16px;font-size:1rem;border:1px solid rgba(var(--heading-rgb),0.1);border-radius:14px;outline:none;background:var(--surface);transition:border-color 0.2s,box-shadow 0.2s;}
.calc-row input:focus{border-color:rgba(var(--blue-rgb),0.35);box-shadow:0 0 0 4px rgba(var(--blue-rgb),0.08);}
.calc-row input[readonly]{background:rgba(249,249,249,0.8);color:var(--text-sub);}
.notice-box{margin-top:20px;padding:16px 18px;background:rgba(var(--point-rgb),0.04);border:1px solid rgba(var(--point-rgb),0.12);border-radius:12px;}
.notice-box b{color:var(--point);}
.notice-box p{margin:8px 0 0;font-size:0.9rem;line-height:1.7;}

/* 회차별 조회 */
.round-nav{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.rv-jump{display:flex;align-items:center;gap:6px;font-size:0.9rem;font-weight:600;}
/* 소형 변형(40 · radius 12) — 정본(52·14)의 축소판이라는 것이 보이게 값을 맞춘다 */
.rv-jump input{width:100px;height:40px;text-align:center;border:1px solid rgba(var(--heading-rgb),0.12);border-radius:12px;font-size:0.95rem;}
.prize-table{width:100%;border-collapse:collapse;font-size:0.85rem;margin-top:16px;}
.prize-table th, .prize-table td{padding:8px 10px;border-bottom:1px solid rgba(var(--heading-rgb),0.08);text-align:right;}
.prize-table th{background:rgba(var(--heading-rgb),0.04);text-align:center;font-size:0.8rem;color:var(--text-sub);}
.prize-table td:first-child, .prize-table th:first-child{text-align:center;font-weight:700;}
.prize-table td:last-child{text-align:center;color:var(--text-sub);font-size:0.8rem;}
@media(max-width:480px){.prize-table{font-size:0.76rem;}.prize-table th, .prize-table td{padding:6px 5px;}}

/* 스마트 생성 옵션 */
.smart-opts{max-width:900px;margin:0 auto 14px;display:flex;flex-direction:column;gap:8px;}
.smart-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;font-size:0.88rem;}
.smart-label{font-weight:700;color:var(--text-sub);}
.smart-row label{display:inline-flex;align-items:center;gap:5px;cursor:pointer;}

/* 번호 통계 */
.stat-range{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:6px;font-size:0.9rem;font-weight:600;}
.stat-range select{height:36px;padding:0 10px;border:1px solid rgba(var(--heading-rgb),0.12);border-radius:8px;font-size:0.9rem;background:var(--surface);cursor:pointer;}
.stat-freq{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px;}
.stat-cell{display:flex;flex-direction:column;align-items:center;gap:3px;}
.stat-cell .cnt{font-size:0.72rem;color:var(--text-sub);font-weight:700;}
.stat-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px;}
.stat-balls{display:flex;gap:8px;flex-wrap:wrap;}
.stat-ball{display:flex;flex-direction:column;align-items:center;gap:2px;}
.stat-ball .sub{font-size:0.76rem;color:var(--text-sub);font-weight:600;}
.stat-note{font-size:0.8rem;color:var(--text-sub);margin-top:16px;}
.lotto-ball.sm{width:40px;height:40px;font-size:0.92rem;}
.lotto-ball.dim{opacity:0.32;}
@media(max-width:480px){.lotto-ball.sm{width:34px;height:34px;font-size:0.82rem;}.stat-cols{grid-template-columns:1fr;}}

@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}

@media(max-width:768px){
  #lotto-tool{padding:16px 12px 56px;}
  
  .lotto-wrapper{padding:16px;}
  .lotto-ball{width:44px;height:44px;font-size:1rem;}
}
@media(max-width:480px){
  .lotto-ball{width:38px;height:38px;font-size:0.9rem;gap:6px;}
  }

/* ── 2026-10-01 사이트 전수 점검 후속 ──────────────────────────────────────────
   🔴 CALC-3 — 번호 한 줄 6개가 모바일에서 4+2 로 꺾였다(줄 폭 184px 에 38px 공 6개 + 간격 = 268px, flex-wrap).
      한 줄은 「한 게임」 이라 꺾이면 두 게임처럼 읽힌다 → 꺾지 않는다(nowrap). 공은 줄 폭에 맞춰 줄어든다
      (flex-basis 38px · shrink 허용 · 정사각 유지). 회차 조회의 당첨번호 7개(+보너스)도 같다. */
.lotto-line, .winning-numbers{ flex-wrap: nowrap; }
/* 생성 버튼이 번호 칸 위로 올라갔다(CALC-2·12 — 페이지 주석) → 버튼과 번호 칸 사이 간격 */
.lotto-wrapper .generate-actions{ margin-bottom: 16px; }
@media (max-width: 480px){
  .lotto-wrapper{ padding: 14px 8px; }
  /* 빈 번호 칸 320px 예약은 모바일에서 버튼을 첫 화면 밖으로 밀었다. 번호가 늘어나며 아래(옵션)를 미는 것은
     누른 직후라 CLS 에 들지 않는다(hadRecentInput). */
  .lotto-numbers{ min-height: 0; }
  /* ⚠️ width:100% — 번호 칸이 가운데 정렬 세로 flex 라 줄이 글자 폭(107px)으로 줄어들고 공이 14px 로 찌그러졌다.
     줄이 칸 폭을 다 쓰게 하고 공(38px)이 그 안에서 같이 줄게 한다(200px 폭이면 약 29px). */
  .lotto-line{ gap: 5px; width: 100%; }
  .winning-numbers{ gap: 4px; }
  .lotto-line .lotto-ball, .winning-numbers .lotto-ball{ flex: 0 1 38px; min-width: 0; width: auto; height: auto; aspect-ratio: 1 / 1; font-size: 0.85rem; }
  .winning-numbers .bonus-separator{ flex: 0 0 auto; margin: 0 1px; font-size: 1.05rem; }
}
/* 🔴 CALC-12 — 당첨금 6열 표가 268px 에 눌려 낱글자가 세로로 쌓였다 → 표는 제 폭을 지키고 상자가 옆으로 민다.
   오른쪽 페이드는 실제 스크롤 위치(lotto-main.ts markFade 의 data-ovf)를 따른다(칩 줄과 같은 규칙 — 넘치지 않으면 페이드 없음). */
.prize-scroll{ margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.prize-scroll .prize-table{ margin-top: 0; min-width: 560px; }
.prize-scroll .prize-table th, .prize-scroll .prize-table td{ white-space: nowrap; }
.prize-scroll[data-ovf='start']{ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.prize-scroll[data-ovf='mid']{ -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.prize-scroll[data-ovf='end']{ -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
.prize-scroll:focus-visible{ outline: 3px solid var(--point); outline-offset: 2px; }
/* 🔴 CALC-23 — 입력 글자 16px 미만이면 iOS 가 칸을 누를 때 화면을 확대한다(회차 칸 15.2px · 분석 범위 14.4px) */
.rv-jump input, .stat-range select{ font-size: 16px; }
.rv-msg{ margin: 0 0 10px; min-height: 1em; text-align: center; font-size: 0.9rem; font-weight: 700; color: var(--point-dark); }
.rv-msg:empty{ display: none; }

/* lotto_generator — 인라인 style 이관(2026-08-04). 선택자 반복은 특정도 조절이다(오타 아님). */
.lotx-1.lotx-1{color:var(--text-sub);text-align:center}
.lotx-2.lotx-2{color:var(--text-sub);font-size:0.95rem}
.lotx-3.lotx-3{background:rgba(var(--blue-rgb),0.06);border-color:rgba(var(--blue-rgb),0.15)}
.lotx-4.lotx-4{background:rgba(255,215,0,0.08);border-color:rgba(255,215,0,0.25)}
.lotx-5.lotx-5{margin-top:8px;font-size:0.85rem;color:var(--text-sub)}