/* ── 로또 번호 생성기 ── */
:root {
  --yellow:  #ca8a04;
  --amber:   #f59e0b;
  --amber2:  #fcd34d;
  --gold:    #fef9c3;
  --gold2:   #fef08a;
  --ink:     #1e293b;
  --muted:   #64748b;
  --line:    #e2e8f0;
  --bg:      #f8fafc;
  --radius:  14px;
  --radius2: 10px;
  --shadow:  0 2px 8px rgba(0,0,0,.06);

  /* 로또 공 색상 (1-10 노랑, 11-20 파랑, 21-30 빨강, 31-40 회색, 41-45 초록) */
  --c1:  #fbc400; --c1t: #1e293b;
  --c11: #69c8f2; --c11t: #1e293b;
  --c21: #ff7272; --c21t: #fff;
  --c31: #aaaaaa; --c31t: #fff;
  --c41: #b0d840; --c41t: #1e293b;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; }

.wrap { max-width: 100%; padding: 0 0 60px; }

/* ── 헤더 ── */
.top { padding: 20px 0 16px; }
.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  width: 48px; height: 48px; border-radius: var(--radius2);
  background: linear-gradient(135deg, #ca8a04, #f59e0b);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.brand h1 { font-size: 22px; font-weight: 700; }
.brand .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ── 카드 ── */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow); margin-bottom: 16px;
}
.card-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 16px; display: flex; align-items: center; gap: 7px; }

/* ── 로또 공 ── */
.ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 16px; font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,.15), inset 0 -2px 4px rgba(0,0,0,.12);
  flex-shrink: 0; transition: transform .15s;
}
.ball:hover { transform: scale(1.08); }

.ball.b1  { background: var(--c1);  color: var(--c1t);  }
.ball.b11 { background: var(--c11); color: var(--c11t); }
.ball.b21 { background: var(--c21); color: var(--c21t); }
.ball.b31 { background: var(--c31); color: var(--c31t); }
.ball.b41 { background: var(--c41); color: var(--c41t); }
.ball.bonus { outline: 3px solid #7c3aed; outline-offset: 2px; }

/* 공 크기 변형 */
.ball.sm { width: 34px; height: 34px; font-size: 13px; }
.ball.lg { width: 56px; height: 56px; font-size: 20px; }

/* ── 메인 결과 영역 ── */
.result-area {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
  border-radius: var(--radius); padding: 28px 22px;
  text-align: center; margin-bottom: 16px;
  min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.result-area .hint { color: #94a3b8; font-size: 14px; margin-bottom: 16px; }
.ball-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.plus-sep { color: #94a3b8; font-size: 18px; font-weight: 700; }
.draw-num { color: #cbd5e1; font-size: 12px; margin-top: 12px; }

/* ── 버튼 ── */
.btn-gen {
  width: 100%; height: 50px;
  background: linear-gradient(135deg, var(--amber), #f97316);
  border: none; border-radius: var(--radius2);
  color: #fff; font-size: 16px; font-weight: 800; cursor: pointer;
  transition: opacity .15s; letter-spacing: .3px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 10px;
}
.btn-gen:hover { opacity: .88; }
.btn-gen:active { transform: scale(.98); }

.btn-row { display: flex; gap: 8px; }
.btn-sm {
  flex: 1; height: 38px;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius2); font-size: 13px; font-weight: 600;
  color: var(--ink); cursor: pointer; transition: all .15s;
}
.btn-sm:hover { border-color: var(--amber); color: var(--yellow); }

/* ── 회차 정보 ── */
.round-info {
  background: var(--gold); border: 1px solid var(--gold2);
  border-radius: var(--radius2); padding: 10px 14px;
  font-size: 13px; color: var(--yellow); font-weight: 600;
  text-align: center; margin-bottom: 12px;
}

/* ── 설정 패널 ── */
.settings-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
}
.settings-row label { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.settings-row select {
  height: 36px; padding: 0 10px;
  border: 1.5px solid var(--line); border-radius: var(--radius2);
  font-size: 13px; color: var(--ink); background: #fff; outline: none;
}
.settings-row select:focus { border-color: var(--amber); }

/* ── 여러 게임 그리드 ── */
.games-grid { display: flex; flex-direction: column; gap: 10px; }
.game-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius2);
  flex-wrap: wrap;
}
.game-label {
  font-size: 12px; font-weight: 700; color: var(--muted);
  min-width: 30px;
}
.game-balls { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
.game-copy {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 9px; font-size: 11px; color: var(--muted); cursor: pointer;
  flex-shrink: 0; transition: all .15s;
}
.game-copy:hover { border-color: var(--amber); color: var(--yellow); }

/* ── 번호 통계 ── */
.stat-section { margin-top: 10px; }
.stat-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.number-grid {
  display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 6px;
}
.num-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; transition: transform .1s;
}
.num-stat:hover { transform: scale(1.1); }
.num-stat .ns-cnt { font-size: 10px; color: var(--muted); }

/* ── 이력 ── */
.history-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.hist-item {
  padding: 10px 12px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hist-time { font-size: 11px; color: var(--muted); min-width: 50px; }
.hist-balls { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; }
.hist-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 2px 6px; flex-shrink: 0;
}
.hist-del:hover { color: #ef4444; }
.hist-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 16px; }

/* ── 토스트 ── */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: #1e293b; color: #fff; border-radius: 100px;
  padding: 10px 20px; font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: all .2s; z-index: 9999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 사용 안내 ── */
.guide-section {
  margin-top: 24px; background: rgba(246,248,255,.6);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
}
.guide-section h2 { font-size: 15px; font-weight: 800; margin: 0 0 10px; color: var(--ink); }
.guide-section h2:not(:first-child) { margin-top: 18px; }
.guide-steps, .guide-features, .guide-usecase {
  margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.8;
}
.guide-steps li, .guide-features li, .guide-usecase li { margin-bottom: 4px; }
.guide-steps strong, .guide-features strong { color: var(--ink); }
.guide-privacy {
  margin-top: 16px; background: #fefce8; border: 1px solid rgba(202,138,4,.22);
  border-radius: 12px; padding: 12px 14px; font-size: 12px; color: #713f12; line-height: 1.55;
}