@charset "UTF-8";

/* ============================================================
   simulator/desktop.css — 시뮬레이터 & 역대통계 페이지 전용
   (dashboard/desktop.css 와 완전히 독립)
   ============================================================ */

/* ── CSS 변수 ───────────────────────────────────────��──── */
:root {

  /* ── 주색상 (사이드바 배경, 로고, 강조 버튼) ──────────────
     전체 테마 색상을 바꾸려면 이 세 줄만 수정           */
  --color-primary:        #1e2530;
  --color-primary-dark:   #151c26;
  --color-primary-light:  #e8eef7;

  /* ── 포인트색 (활성 아이콘, 성공, 하이라이트) ────────────
     포인트 색상을 바꾸려면 이 세 줄만 수정              */
  --color-accent:         #10b981;
  --color-accent-light:   #d1fae5;
  --color-accent-bg:      #f0f8f4;

  /* ── 그린 (배지, NEW 표시, 등급 관련) ────────────────────
     배지 색상을 바꾸려면 이 세 줄만 수정                */
  --color-green:          #3B6D11;
  --color-green-light:    #EAF3DE;
  --color-green-border:   #C0DD97;

  /* ── 보조색 (성공률 수치 등) ──────────────────────────── */
  --color-sky:            #38bdf8;
  --color-sky-light:      #e0f2fe;

  /* ── 텍스트 ───────────────────────────────────────────────
     · text:       본문 기본 (제일 진함)
     · text-sub:   보조 (카드 제목, 레이블)
     · text-muted: 흐림 (날짜, 단위, 힌트)                */
  --color-text:           #0f1c2e;
  --color-text-sub:       #4a5f7a;
  --color-text-muted:     #8fa3b8;

  /* ── 배경 & 선 ────────────────────────────────────────── */
  --color-bg:             #f0f4f8;
  --color-bg-white:       #ffffff;
  --color-border:         #dde5f0;

  /* ── 상태색 ───────────────────────────────────────────── */
  --color-danger:         #ef4444;
  --color-warning:        #f59e0b;
  --color-rank-2:         #6b7280;
  --color-rank-3:         #b45309;

  /* ── 폰트 패밀리 ──────────────────────────────────────────
     폰트 교체하려면 이 한 줄만 수정
     예) 'Noto Sans KR', sans-serif                       */
  --font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── 폰트 크기 (clamp 방식) ───────────────────────────────
     clamp(모바일최소, 화면비율, 데스크톱최대)
     · 화면이 작을수록 첫번째 값에 가까워짐
     · 화면이 클수록 세번째 값에 가까워짐
     · 중간값(vw)이 클수록 반응이 강해짐
     · "기준점에서 갑자기 바뀌는" 현상 없음              */
  --text-xs:    clamp(0.625rem, 2.2vw, 0.75rem);   /*  10~12px */
  --text-sm:    clamp(0.6875rem,2.5vw, 0.875rem);  /*  11~14px */
  --text-base:  clamp(0.75rem,  2.8vw, 0.9375rem); /*  12~15px */
  --text-md:    clamp(0.8125rem,3.0vw, 1rem);      /*  13~16px */
  --text-lg:    clamp(0.875rem, 3.2vw, 1.125rem);  /*  14~18px */
  --text-xl:    clamp(1rem,     3.5vw, 1.375rem);  /*  16~22px */
  --text-2xl:   clamp(1.125rem, 4.0vw, 1.625rem);  /*  18~26px */
  --text-3xl:   clamp(1.25rem,  5.0vw, 2.25rem);   /*  20~36px */

  /* ── 간격 (clamp 방식) ────────────────────────────────────
     모바일에서 좁게, 데스크톱에서 넓게 자동 조절         */
  --space-xs:   clamp(4px,  1vw,  6px);
  --space-sm:   clamp(8px,  2vw,  12px);
  --space-md:   clamp(12px, 2.5vw,16px);
  --space-lg:   clamp(16px, 3vw,  24px);
  --space-xl:   clamp(20px, 4vw,  32px);

  /* ── 둥글기 ───────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── 레이아웃 치수 ────────────────────────────────────────
     · header-h:  헤더 높이 (모바일 56px, 데스크톱 60px)
     · sidebar-w: 사이드바 너비 (데스크톱 전용)
     · tabnav-h:  하단 탭바 높이 (모바일 전용)              */
  --header-h:   56px;
  --sidebar-w:  326px;
  --tabnav-h:   60px;

  /* ── 전환 효과 ────────────────────────────────────────── */
  --transition: 0.15s ease;
}



/* ── 리셋 & 기본 설정 ──────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation; /* iOS Safari 300ms 딜레이 제거 */
}

a            { color: inherit; text-decoration: none; }
button       { font-family: var(--font-base); cursor: pointer; border: none; background: none; }
input,
select,
textarea     { font-family: var(--font-base); }
img          { max-width: 100%; display: block; }
ul, ol       { list-style: none; }

/* ── 헤더 공통 nav ──────────────────────────────────────── */
.sa-nav {
  display: flex; align-items: center; gap: 4px; margin-left: auto;
}
.sa-nav a {
  color: rgba(255,255,255,0.75); font-size: var(--text-sm); font-weight: 500;
  text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.sa-nav a:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ── .page__title ───────────────────────────────────���──── */
.page__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.3px;
  margin-bottom: var(--space-md);
}

/* ── 게임 선택 드롭다운 ────────────────────────────��───── */
.combos-select {
  padding: 6px 10px;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: calc(var(--text-md) * 1.15);
  color: var(--color-text);
  background: white;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── 빛나기 애니메이션 ─────────────────────────────��───── */
@keyframes richball-shine {
  0%   { left: -75%; }
  50%  { left: 125%; }
  100% { left: 125%; }
}

/* ── 시뮬레이터 컴포넌트 (데스크톱 오버라이드 포함) ─────── */
  .sim-exclude-grid {
    grid-template-columns: repeat(7, 44px);
  }
  .sim-exclude-btn {
    width: 44px;
    height: 44px;
  }
  .sim-exclude-card {
    padding: var(--space-md) var(--space-lg);
  }
  .sim-winning-slots {
    align-items: flex-start;
  }

  /* ── 필터링 조건 카드 ── */
  .sim-filter-card {
    display: block;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-xl);
    margin-top: var(--space-sm);
  }
  .sim-filter-title {
    font-size: calc(var(--text-base) * 1.15 * 1.08);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
  }
  .sim-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-bg);
    flex-wrap: wrap;
  }
  .sim-filter-row--noborder {
    border-bottom: none;
    padding-bottom: 6px;
  }
  .sim-filter-check {
    width: 17px;
    height: 17px;
    accent-color: #1a7a4a;
    cursor: pointer;
    flex-shrink: 0;
  }
  .sim-filter-name {
    font-size: calc(var(--text-sm) * 1.15);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    min-width: 145px;
  }
  .sim-filter-select {
    padding: 4px 8px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: calc(var(--text-sm) * 1.15);
    color: var(--color-text);
    background: var(--color-bg-white);
    cursor: pointer;
    font-family: var(--font-base);
  }
  .sim-filter-unit {
    font-size: calc(var(--text-sm) * 1.15);
    color: var(--color-text-sub);
    white-space: nowrap;
  }
  .sim-filter-auto-val {
    min-width: 42px;
    padding: 3px 10px;
    border: 1.5px solid #10b981;
    border-radius: var(--radius-sm);
    font-size: calc(var(--text-sm) * 1.15);
    font-weight: 700;
    color: #10b981;
    text-align: center;
    background: var(--color-bg-white);
  }
  .sim-filter-auto-label {
    font-size: calc(var(--text-xs) * 1.15);
    color: #10b981;
    font-weight: 500;
  }
  .sim-filter-num-input {
    width: 64px;
    padding: 5px 10px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: calc(var(--text-sm) * 1.15);
    color: var(--color-text);
    text-align: center;
    font-family: var(--font-base);
    outline: none;
    -moz-appearance: textfield;
  }
  .sim-filter-num-input::-webkit-inner-spin-button,
  .sim-filter-num-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .sim-filter-num-input:focus {
    border-color: var(--color-primary);
  }
  .sim-filter-hint {
    font-size: calc(var(--text-xs) * 1.15);
    color: #7090a8;
  }
  .sim-filter-sections {
    display: flex;
    align-items: center;
    gap: 10px 16px;
    flex-wrap: wrap;
    /* checkbox(17px) + gap(10px) + prefix min-width(100px) = 127px
       → 구간 섹션이 키워드(구간별 개수) 시작점과 정확히 수직 정렬 */
    padding-left: 127px;
    padding-bottom: 14px;
  }
  .sim-filter-sec-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .sim-filter-sec-label {
    font-size: calc(var(--text-xs) * 1.15);
    color: var(--color-text-sub);
    white-space: nowrap;
  }
  .sim-filter6-input {
    width: 48px;
    padding: 5px 6px;
  }
  /* 필터 이름 — "필터N." prefix 연하게, 고정 너비로 키워드 정렬 기준 통일
     16개 언어 중 가장 긴 prefix(Finnish "Suodatin N. " ~88px)를 기준으로
     100px 고정 → 키워드가 항상 동일한 X 위치에서 시작 */
  .sim-filter-prefix {
    display: inline-block;
    min-width: 100px;
    color: #7090a8;
    font-weight: 400;
  }
  /* 필터 키워드 레이블 — 앞번호대, 홀수, 뒷번호대, 짝수, 최소, 최대 진하게 */
  .sim-filter-kw {
    font-size: calc(var(--text-sm) * 1.15);
    color: var(--color-text);
    font-weight: 600;
    white-space: nowrap;
  }
  /* ── 조합수 총 개수 카드 + 테스트 시작 ── */
  .sim-count-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-xl);
    margin-top: var(--space-sm);
  }
  .sim-count-title {
    font-size: calc(var(--text-base) * 1.15 * 1.08);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-md);
  }
  .sim-count-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .sim-count-label {
    font-size: calc(var(--text-sm) * 1.15);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
  }
  .sim-count-input {
    width: 100px;
    padding: 6px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: calc(var(--text-sm) * 1.15);
    color: var(--color-text);
    text-align: center;
    font-family: var(--font-base);
    outline: none;
    -moz-appearance: textfield;
  }
  .sim-count-input::-webkit-inner-spin-button,
  .sim-count-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .sim-count-input:focus { border-color: var(--color-primary); }
  .sim-count-hint {
    font-size: calc(var(--text-xs) * 1.15);
    color: var(--color-text-muted);
  }
  .sim-run-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: var(--space-sm);
  }
  .sim-run-btn {
    padding: 12px 28px;
    min-height: 48px;
    background: #EAF3DE;
    color: #3B6D11;
    border: 1.5px solid #C0DD97;
    border-radius: var(--radius-sm);
    font-family: var(--font-base);
    font-size: calc(var(--text-base) * 1.15);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition);
  }
  .sim-run-btn:hover { background: #DDF0C4; }
  .sim-run-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: calc(var(--text-sm) * 1.15);
    color: #92400e;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
  }
  .sim-run-notice strong { font-weight: 700; }
  /* 상단 단독 경고 박스 */
  .sim-top-notice {
    margin-bottom: var(--space-sm);
  }

  /* ── 결과 영역 — 등수/조합수/빈도수 ── */
  .sim-results-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
  }
  .sim-result-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
  }
  .sim-result-card__title {
    font-size: calc(var(--text-base) * 1.15 * 1.08);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
  }
  .sim-result-placeholder {
    font-size: calc(var(--text-sm) * 1.15);
    color: var(--color-text-muted);
  }
  /* 등수 확인 */
  .sim-grade-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-bottom: var(--space-sm);
  }
  .sim-grade-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-sm);
  }
  .sim-grade-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(var(--text-sm) * 1.15);
  }
  .sim-grade-label { font-weight: 600; color: var(--color-text); min-width: 28px; }
  .sim-grade-sep { color: var(--color-text-muted); }
  .sim-grade-val { color: var(--color-text); }
  .sim-grade-footer {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
    margin-top: auto;
    font-size: calc(var(--text-xs) * 1.15);
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.5;
  }
  /* ── 역대 통계/분석 필터 카드 ── */
  .hist-filter-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    transition: opacity 0.2s;
  }
  .hist-filter-card.is-disabled {
    opacity: 0.45;
    pointer-events: none;
  }
  .hist-filter-card__title {
    font-size: calc(var(--text-base) * 1.15 * 1.08);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
  }
  .hist-filter-card__subtitle {
    font-size: calc(var(--text-xs) * 1.15);
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 6px;
  }
  .hist-period-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
  }
  .hist-period-label {
    font-size: calc(var(--text-sm) * 1.15);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    margin-right: 4px;
  }
  .hist-period-sel {
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: calc(var(--text-sm) * 1.15);
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-bg);
    cursor: pointer;
  }
  .hist-period-tilde {
    font-size: calc(var(--text-sm) * 1.15);
    color: var(--color-text-muted);
  }
  .hist-period-count {
    font-size: calc(var(--text-sm) * 1.15);
    color: var(--color-accent);
    font-weight: 600;
    margin-left: 4px;
  }
  .hist-filter-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--space-md);
  }
  .hist-filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: calc(var(--text-sm) * 1.15);
    color: var(--color-text);
    cursor: pointer;
  }
  .hist-filter-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1a7a4a;
    flex-shrink: 0;
  }
  .hist-filter-btn-row {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
  }
  .hist-filter-btn-row .sim-out-btn {
    flex: 0 0 auto;
  }

  /* ── 역대 통계/분석 결과 카드 ── */
  .hist-res-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .hist-res-card__head { padding: 16px 20px 0; }
  .hist-res-card__title {
    font-size: calc(var(--text-base) * 1.15 * 1.08);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 2px;
  }
  .hist-res-card__meta {
    font-size: calc(var(--text-xs) * 1.15);
    color: var(--color-text-muted);
  }
  .hist-res-card__meta strong { color: var(--color-text-secondary); }
  .hist-res-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    padding: 0 20px;
    gap: 0;
    margin-top: 12px;
  }
  .hist-res-tab {
    padding: 10px 14px 8px;
    font-size: calc(var(--text-sm) * 1.15);
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    background: none;
    font-family: var(--font-base);
    transition: all 0.15s;
  }
  .hist-res-tab.is-active { color: var(--color-text-secondary); border-bottom-color: #22c55e; }
  .hist-res-panel { display: none; padding: 18px 20px; }
  .hist-res-panel.is-active { display: block; }
  /* bar chart sections */
  .hist-filter-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f4f8;
  }
  .hist-filter-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .hist-filter-section__title {
    font-size: calc(var(--text-sm) * 1.15);
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .hist-filter-section__badge {
    font-size: 10px;
    font-weight: 600;
    background: #e8eef7;
    color: #5a7a9f;
    border-radius: 20px;
    padding: 2px 7px;
  }
  .hist-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: var(--text-sm); }
  .hist-bar-label { width: 120px; color: #3a4a5c; font-weight: 500; text-align: right; flex-shrink: 0; font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .hist-bar-wrap { flex: 1; height: 16px; background: #f0f4f8; border-radius: 4px; overflow: hidden; }
  .hist-bar { height: 100%; background: #cbd5e1; border-radius: 4px; }
  .hist-bar--top { background: linear-gradient(90deg, #22c55e, #16a34a); }
  .hist-bar-count { width: 46px; color: var(--color-text-secondary); font-weight: 600; font-size: var(--text-xs); text-align: right; }
  .hist-bar-pct { width: 42px; color: var(--color-text-sub); font-size: var(--text-xs); text-align: right; }
  .hist-stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
  .hist-stat-box { background: #f4f7fb; border-radius: 8px; padding: 7px 12px; text-align: center; min-width: 72px; }
  .hist-stat-box__label { font-size: var(--text-xs); color: var(--color-text-sub); margin-bottom: 1px; }
  .hist-stat-box__val { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-secondary); }
  .hist-sec-grid { display: grid; gap: 5px; margin-bottom: 10px; }
  .hist-sec-cell { background: #f4f7fb; border-radius: 8px; padding: 7px 4px; text-align: center; }
  .hist-sec-cell__range { font-size: var(--text-xs); color: var(--color-text-sub); }
  .hist-sec-cell__avg { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-secondary); }
  .hist-sec-cell__avg-label { font-size: var(--text-xs); font-weight: normal; color: var(--color-text-sub); }
  /* table */
  .hist-table-wrap {
    overflow-x: auto;
    max-height: 480px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid #e8eef7;
  }
  .hist-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .hist-table thead th {
    position: sticky;
    top: 0;
    background: #f4f7fb;
    color: #5a7a9f;
    font-weight: 700;
    padding: 8px 10px;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
    text-align: center;
  }
  .hist-table thead th:first-child,
  .hist-table thead th:nth-child(2) { text-align: left; }
  .hist-table tbody tr { border-bottom: 1px solid #f0f4f8; }
  .hist-table tbody tr:hover { background: #fafcff; }
  .hist-table tbody td { padding: 7px 10px; color: #3a4a5c; text-align: center; white-space: nowrap; }
  .hist-table tbody td:first-child { color: var(--color-text-muted); font-size: 11px; text-align: left; }
  .hist-table tbody td:nth-child(2) { font-weight: 700; color: #1e2530; text-align: left; letter-spacing: 0.02em; }
  .hist-table .td-hi { color: var(--color-text-secondary); font-weight: 700; }

  /* ── txt 업로드 카드 ── */
  .txt-upload-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
  }
  .txt-upload-card__title {
    font-size: calc(var(--text-base) * 1.15 * 1.08);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
  }
  .txt-upload-drop {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    padding: 24px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
  }
  .txt-upload-drop:hover,
  .txt-upload-drop.is-over {
    border-color: var(--color-accent);
    background: #f0fdf4;
  }
  .txt-upload-drop__icon { font-size: 28px; line-height: 1; margin-bottom: 8px; }
  .txt-upload-drop__main {
    font-size: calc(var(--text-sm) * 1.15);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 3px;
  }
  .txt-upload-drop__sub {
    font-size: calc(var(--text-xs) * 1.15);
    color: var(--color-text-muted);
    margin-bottom: 14px;
  }
  .txt-upload-drop__guide {
    list-style: none;
    padding-left: 0;
    margin: 0 auto 14px;
    display: block;
    width: fit-content;
    text-align: left;
  }
  .txt-upload-drop__guide li {
    font-size: calc(var(--text-xs) * 1.05);
    color: var(--color-text-muted);
    line-height: 1.75;
    padding-left: 14px;
    position: relative;
  }
  .txt-upload-drop__guide li::before {
    content: '·';
    position: absolute;
    left: 2px;
    color: var(--color-text-muted);
  }
  .txt-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: #EAF3DE;
    color: #3B6D11;
    border: 1.5px solid #C0DD97;
    border-radius: var(--radius-sm);
    font-size: calc(var(--text-sm) * 1.15);
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-base);
    transition: background 0.15s;
  }
  .txt-upload-btn:hover { background: #DDF0C4; }
  .txt-upload-input { display: none; }
  .txt-upload-file-info {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-sm);
  }
  .txt-upload-file-info.is-visible { display: flex; }
  .txt-upload-file-info__icon { font-size: 18px; }
  .txt-upload-file-info__name {
    flex: 1;
    font-size: calc(var(--text-sm) * 1.15);
    font-weight: 600;
    color: #166534;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .txt-upload-file-info__size {
    font-size: calc(var(--text-xs) * 1.15);
    color: #4ade80;
    white-space: nowrap;
  }
  .txt-upload-file-info__del {
    background: none;
    border: none;
    font-size: 16px;
    color: #86efac;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s;
  }
  .txt-upload-file-info__del:hover { color: #dc2626; }

  /* 조합수 출력 */
  .sim-combos-out-area {
    flex: 1;
    min-height: 120px;
    resize: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: calc(var(--text-xs) * 1.15);
    color: var(--color-text-muted);
    font-family: var(--font-base);
    background: var(--color-bg);
    outline: none;
    margin-bottom: var(--space-sm);
  }
  .sim-combos-out-btns {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }
  .sim-out-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-family: var(--font-base);
    font-size: calc(var(--text-sm) * 1.15);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
  }
  .sim-out-btn--primary {
    background: #EAF3DE;
    color: #3B6D11;
    border: 1.5px solid #C0DD97;
  }
  .sim-out-btn--primary:hover { background: #DDF0C4; }
  .sim-out-btn--outline {
    background: var(--color-bg-white);
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
  }
  .sim-out-btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
  /* 빈도수 순위 카드 */
  .sim-freq-rank-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    margin-top: var(--space-sm);
  }

  /* ── 빈도수 출력 그리드 ── */
  .sim-freq-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    padding: 0 2px;
    gap: 2px;
    margin-bottom: 8px;
  }
  .sim-freq-tab {
    padding: 5px 10px;
    font-size: calc(var(--text-xs) * 1.15);
    font-weight: 600;
    color: #6b7a8f;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    font-family: var(--font-base);
    transition: all 0.15s;
  }
  .sim-freq-tab.is-active { color: #1e3a5f; border-bottom-color: #1e3a5f; }
  .sim-freq-panel { display: none; }
  .sim-freq-panel.is-active { display: block; }
  .sim-freq-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }
  .sim-freq-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 5px 2px;
    background: #1e3a5f;
    color: #fff;
    min-width: 0;
  }
  .sim-freq-cell--bonus { background: #7c4dae; }
  .sim-freq-cell--zero  { background: #f0f4f8; color: #aab4c0; }
  .sim-freq-cell__top  { display: flex; align-items: center; justify-content: center; gap: 1px; line-height: 1.2; }
  .sim-freq-cell__star { font-size: 11px; line-height: 1; }
  .sim-freq-cell__num  { font-size: 13px; font-weight: 700; line-height: 1.2; }
  .sim-freq-cell__cnt  { font-size: 11px; font-weight: 500; line-height: 1.3; opacity: 0.85; }
  .sim-freq-cell--zero .sim-freq-cell__cnt { opacity: 1; color: #c0cad6; }
  /* 빈도수 순위 — 세로 막대 차트 */
  .sim-freq-rank-label {
    font-size: calc(var(--text-xs) * 1.15);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 10px;
  }
  .sim-vbar-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .sim-vbar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 20px;
    position: relative;
  }
  .sim-vbar-star {
    font-size: 11px;
    line-height: 1;
    margin-bottom: 2px;
    height: 13px;
  }
  .sim-vbar {
    width: 14px;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
    transition: opacity .15s;
  }
  .sim-vbar:hover { opacity: 0.75; }
  .sim-vbar-num {
    font-size: 8px;
    color: #8a9ab0;
    font-weight: 600;
    margin-top: 3px;
    line-height: 1;
  }
  .sim-vbar-axis {
    border-top: 1px solid #e4eaf2;
    margin: 2px 0 6px;
  }
  .sim-freq-rank-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .sim-freq-rank-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: calc(var(--text-xs) * 1.15);
    color: var(--color-text-muted);
  }
  .sim-freq-rank-legend-dot {
    width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
  }
  /* 빈도 그룹 표시 */
  .sim-freq-group { display: flex; flex-direction: column; gap: 5px; }
  .sim-freq-group-row { display: flex; align-items: center; gap: 8px; }
  .sim-freq-group-cnt {
    font-size: 12px; font-weight: 700; color: #8a9ab0;
    min-width: 34px; text-align: right; flex-shrink: 0;
  }
  .sim-freq-group-nums { display: flex; flex-wrap: wrap; gap: 4px; }
  .sim-freq-group-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px;
    font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
  }
  .sim-freq-group-badge.is-bonus {
    background: #b8c2ce !important;
    color: #fff !important;
  }
  .sim-freq-group-badge.is-star {
    position: relative;
    background: transparent !important;
    color: #1e2530 !important;
    width: 26px; height: 26px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 900;
    z-index: 1;
  }
  .sim-freq-group-badge.is-star::before {
    content: '';
    position: absolute;
    inset: -5px;
    clip-path: polygon(50% 0%, 62% 33%, 98% 33%, 70% 55%, 80% 92%, 50% 70%, 20% 92%, 30% 55%, 2% 33%, 38% 33%);
    background: #FFD700;
    z-index: -1;
  }

  /* 빈도수 순위 — 탭 */
  .sim-rank-tabs {
    display: flex; gap: 2px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 12px;
  }
  .sim-rank-tab {
    font-size: calc(var(--text-xs) * 1.15); font-weight: 600;
    color: #8a9ab0; padding: 5px 12px;
    border: none; background: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    font-family: var(--font-base); transition: color .15s, border-color .15s;
    border-radius: 6px 6px 0 0;
  }
  .sim-rank-tab.is-active { color: #1e3a5f; border-bottom-color: #1e3a5f; }
  .sim-rank-panel { display: none; }
  .sim-rank-panel.is-active { display: block; }
  /* 빈도순 가로 랭킹 */
  .sim-hrank-list { display: flex; flex-direction: column; gap: 4px; }
  .sim-hrank-row  { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
  .sim-hrank-pos  {
    width: 22px; text-align: right; flex-shrink: 0;
    font-size: 12px; font-weight: 700; color: #b0bcc8;
  }
  .sim-hrank-pos--top3 { color: #e67e22; }
  .sim-hrank-num {
    width: 24px; text-align: center; flex-shrink: 0;
    font-size: 13px; font-weight: 800; color: #1e2530;
  }
  .sim-hrank-star { font-size: 13px; line-height: 1; width: 16px; text-align: center; flex-shrink: 0; }
  .sim-hrank-bar-wrap {
    flex: 1; background: #f0f4f8; border-radius: 5px;
    height: 16px; overflow: hidden;
  }
  .sim-hrank-bar { height: 100%; border-radius: 5px; }
  .sim-hrank-cnt {
    width: 32px; text-align: right; flex-shrink: 0;
    font-size: 12px; font-weight: 700; color: var(--color-text);
  }
  .sim-hrank-pct {
    width: 40px; text-align: right; flex-shrink: 0;
    font-size: 12px; color: var(--color-text-muted);
  }

  /* 필터 행 비활성 (체크박스 제외한 나머지 흐리게) */
  .sim-filter-row > *:not(.sim-filter-check),
  .sim-filter-sections,
  .sim-filter6-warn {
    transition: opacity 0.15s;
  }
  .sim-filter-row.is-inactive > *:not(.sim-filter-check) {
    opacity: 0.6;
    pointer-events: none;
    user-select: none;
  }
  .sim-filter-sections.is-inactive,
  .sim-filter6-warn.is-inactive {
    opacity: 0.6;
    pointer-events: none;
    user-select: none;
  }

  /* 필터6 구간 합계 초과 경고 */
  .sim-filter6-warn {
    display: none;
    color: var(--color-danger);
    font-size: calc(var(--text-xs) * 1.15);
    font-weight: 500;
    padding: 4px 0 8px 32px;
  }
  .sim-filter6-warn.is-visible { display: block; }
  .sim-filter-num-input.is-error {
    border-color: var(--color-danger) !important;
    background: #fff5f5;
  }
  /* 필터 카드 비활성 (게임 미선택 시) */
  .sim-filter-card.is-disabled {
    opacity: 0.38;
    pointer-events: none;
  }
  /* 제외수 + 보너스 번호판 나란히 배치 */
  .sim-exclude-pads-wrap {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .sim-bonus-numpad {
    display: none;
  }
  .sim-bonus-numpad.is-visible {
    display: block;
  }
  .sim-bonus-numpad .sim-exclude-numpad__top,
  .sim-bonus-numpad .sim-exclude-numpad__bottom {
    background: #ffe4cc;
  }


/* ── 공통 모달 ─────────────────────────────────────────── */
/* ============================================================
   공통 모달 (.modal)
   ============================================================
   · 시뮬레이터 당첨번호 입력 / 게임 미선택 경고에서 사용
   · z-index: 500 (헤더 200보다 위)
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.modal-overlay--hidden {
  display: none;
}
.modal {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 460px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
}

/* 경고 모달 */
.modal--alert {
  padding: var(--space-xl) var(--space-xl);
  text-align: center;
  max-width: 480px;
}
.modal--alert p {
  font-size: calc(var(--text-sm) * 1.15);
  color: var(--color-text);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
  white-space: pre-line;
}
.modal--alert .modal__btn-wrap {
  display: flex;
  justify-content: center;
}

/* 번호 입력 모달 */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
}
.modal__title {
  font-size: calc(var(--text-base) * 1.15);
  font-weight: 700;
  color: var(--color-text);
}
.modal__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.modal__close:hover { background: var(--color-bg); }

.modal__body {
  padding: 12px 16px 16px;
}

/* 게임 설명 레이블 */
.modal__game-label {
  display: inline-block;
  font-size: calc(var(--text-sm) * 1.15);
  font-weight: 600;
  color: var(--color-text-sub);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  margin-bottom: var(--space-md);
}

/* 선택된 번호 슬롯 행 */
.modal__slots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-sm);
}
.modal__slots-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}
/* 선택된 번호 슬롯 */
.modal__slot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px dashed var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--text-sm) * 1.15 * 1.25);
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-bg);
  transition: all var(--transition);
  flex-shrink: 0;
}
/* 보너스볼 구분자 */
.modal__slot-sep {
  font-size: calc(var(--text-lg) * 1.15);
  color: var(--color-text-muted);
  font-weight: 300;
  flex-shrink: 0;
}

/* 선택 카운트 안내 */
.modal__count {
  text-align: center;
  font-size: calc(var(--text-xs) * 1.15);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* 번호판 그리드 */
.modal__numpad {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
/* 번호판 기본 상태 — 색깔 없음 */
.modal__num {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  font-family: var(--font-base);
  font-size: calc(var(--text-xs) * 1.15 * 1.20);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 슬롯 색상 — 진한 선명한 색 */
.num-r1 { background:#f59e0b; color:#fff; border-color:#f59e0b; }
.num-r2 { background:#3b82f6; color:#fff; border-color:#3b82f6; }
.num-r3 { background:#ef4444; color:#fff; border-color:#ef4444; }
.num-r4 { background:#6b7280; color:#fff; border-color:#6b7280; }
.num-r5 { background:#22c55e; color:#fff; border-color:#22c55e; }
.num-r6 { background:#ec4899; color:#fff; border-color:#ec4899; }
.num-r7 { background:#f97316; color:#fff; border-color:#f97316; }
.num-r8 { background:#06b6d4; color:#fff; border-color:#06b6d4; }
.num-r9 { background:#8b5cf6; color:#fff; border-color:#8b5cf6; }

/* 번호판 버튼 — 색깔 완전 없음, 연한 회색 */
button.modal__num { background:#ffffff; color:#c0c8d0; border-color:#e8edf2; }
button.modal__num.num-r1, button.modal__num.num-r2, button.modal__num.num-r3,
button.modal__num.num-r4, button.modal__num.num-r5, button.modal__num.num-r6,
button.modal__num.num-r7, button.modal__num.num-r8,
button.modal__num.num-r9 { background:#ffffff; color:#c0c8d0; border-color:#e8edf2; }

/* 선택된 번호판 버튼 — 진한 회색 채움, 테두리/outline 없음 */
button.modal__num.modal__num--selected { background:#dde6f0; color:#2c3a4a; border-color:#dde6f0; font-weight:700; outline:none; }
button.modal__num.modal__num--selected.num-r1, button.modal__num.modal__num--selected.num-r2,
button.modal__num.modal__num--selected.num-r3, button.modal__num.modal__num--selected.num-r4,
button.modal__num.modal__num--selected.num-r5, button.modal__num.modal__num--selected.num-r6,
button.modal__num.modal__num--selected.num-r7, button.modal__num.modal__num--selected.num-r8,
button.modal__num.modal__num--selected.num-r9 { background:#dde6f0; color:#2c3a4a; border-color:#dde6f0; }
/* 보너스볼로 선택된 번호 — 점선 테두리로 구분 */
button.modal__num.modal__num--bonus { outline:2px dashed var(--color-accent); outline-offset:2px; }
/* 보너스볼 단계에서 범위 밖 번호 — 비활성 */
button.modal__num:disabled,
button.modal__num.modal__num--out-of-range {
  background: #f5f5f5 !important;
  color: #d0d0d0 !important;
  border-color: #ebebeb !important;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.45;
}

/* 모달 하단 버튼 행 */
.modal__footer {
  display: flex;
  gap: var(--space-sm);
  border-top: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-lg);
}
.modal__btn {
  flex: 1;
  padding: 12px;
  min-height: 48px;
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: calc(var(--text-base) * 1.15);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
  border: 1px solid #C0DD97;
  background: #ffffff;
  color: #3B6D11;
}
.modal__btn--primary {
  background: #EAF3DE;
  border-color: #C0DD97;
  color: #3B6D11;
}



/* ── 시뮬레이터 메인 컴포넌트 ─────────────────────────── */
/* ============================================================
   시뮬레이터 페이지 — STEP 11
   ============================================================ */

/* 상단 탭 버튼 — test-banner__btn 구조 재사용, 초록 테마 */
.sim-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-md);
  flex-wrap: nowrap;
  border-bottom: 2px solid var(--color-border);
  background: var(--color-bg-white);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 0 8px;
}
.sim-tab {
  flex: 1;
  min-width: 0;
  padding: 13px 8px 11px;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #8a9ab0;
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
}
.sim-tab.is-active {
  color: #1e3a5f;
  border-bottom-color: var(--color-accent);
}
.sim-tab:not(.is-active):hover { color: #1e3a5f; }

/* 시뮬레이터 제목 줄 */
.sim-title-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-md);
}
.sim-title-row .page__title {
  flex: 1;
  margin-bottom: 0;
}

/* 이용방법 버튼 */
.sim-help-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-base);
  font-size: calc(var(--text-xs, 0.75rem) * 1.15 * 1.1);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  margin-left: 12px;
  padding: 5px 13px;
  background: #EAF3DE;
  color: #3B6D11;
  border: 1.5px solid #C0DD97;
  border-radius: var(--radius-sm);
}
.sim-help-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.65) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: richball-shine 2.4s ease-in-out infinite;
}
.sim-help-btn:hover { background: #DDF0C4; }
.sim-help-btn--no-border { border-color: transparent; }

/* 탭 내 인라인 이용방법 버튼 */
.sim-help-inline-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-base);
  font-size: clamp(0.875rem, 3.2vw, calc(var(--text-base) * 1.15));
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  margin-left: 17px;
  padding: 5px 13px;
  background: #EAF3DE;
  color: #3B6D11;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
}
.sim-help-inline-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.65) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: richball-shine 2.4s ease-in-out infinite;
}
.sim-help-inline-btn:hover { background: #DDF0C4; }

/* 이용방법 모달 */
.sim-help-modal {
  max-width: 720px;
  height: 72vh;
  max-height: 82vh;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.sim-help-modal .modal__body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
  overscroll-behavior: contain;
}

/* 이용방법 모달 내부 탭 */
.sim-help-tabs {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  background: var(--color-bg);
  padding: 0 var(--space-lg);
  flex-shrink: 0;
}
.sim-help-tab {
  flex: 1;
  padding: 10px 6px 8px;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  font-family: var(--font-base);
  font-size: calc(var(--text-sm) * 1.15);
  font-weight: 600;
  color: #8a9ab0;
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sim-help-tab.is-active {
  color: #1e3a5f;
  border-bottom-color: var(--color-accent);
}
.sim-help-tab:not(.is-active):hover { color: #1e3a5f; }

.sim-help-panel { display: none; }
.sim-help-panel.is-active { display: block; }

/* 이용방법 모달 하단 고정 안내 */
.sim-help-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  padding: 10px var(--space-lg);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sim-help-footer-item {
  font-size: calc(var(--text-xs, 0.75rem) * 1.15);
  color: var(--color-text-muted);
  line-height: 1.55;
}
.sim-help-footer-item::before { content: "· "; }
.sim-help-section {
  margin-bottom: var(--space-xl);
}
.sim-help-section:last-child { margin-bottom: 0; }
.sim-help-section__title {
  font-size: calc(var(--text-base) * 1.15);
  font-weight: 700;
  color: var(--color-text);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: var(--space-md);
}
.sim-help-subsection {
  margin-bottom: var(--space-md);
}
.sim-help-subsection__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}
.sim-help-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.sim-help-list li {
  font-size: var(--text-sm);
  color: var(--color-text-sub);
  line-height: 1.75;
  margin-bottom: 3px;
  padding-left: 31px;
  position: relative;
}
.sim-help-list li::before {
  content: '·';
  position: absolute;
  left: 13px;
  color: var(--color-text-sub);
}
.sim-help-list li strong {
  color: var(--color-text);
  font-weight: 600;
}
.sim-help-note {
  background: #f4f9ee;
  border-left: 3px solid var(--color-accent);
  padding: 8px 14px;
  font-size: var(--text-sm);
  color: var(--color-text-sub);
  line-height: 1.7;
  margin-top: 10px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.sim-help-tag {
  display: inline-block;
  background: #EAF3DE;
  color: #3B6D11;
  font-size: calc(var(--text-xs, 0.75rem) * 1.15);
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: middle;
}
.sim-help-filter-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-top: 8px;
}
.sim-help-filter-table th,
.sim-help-filter-table td {
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  color: var(--color-text-sub);
}
.sim-help-filter-table th {
  background: var(--color-bg);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}
.sim-help-filter-table td:first-child {
  white-space: nowrap;
}

/* 모바일 전용 안내 박스 — 기본 숨김, 모바일 미디어쿼리에서 flex 표시 */
.sim-mobile-notice {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  margin-top: var(--space-lg);
  gap: var(--space-md);
  min-height: 260px;
  color: var(--color-text-sub);
}
.sim-mobile-notice__icon {
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}
.sim-mobile-notice__title {
  font-size: calc(var(--text-base) * 1.15);
  font-weight: 700;
  color: var(--color-text);
}
.sim-mobile-notice__desc {
  font-size: calc(var(--text-sm) * 1.15);
  color: var(--color-text-sub);
  line-height: 1.7;
}

/* Beta 배지 */
.sim-beta {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: #ffffff;
  color: #5a8f5a;
  border: 1.5px solid #5a8f5a;
  font-size: calc(var(--text-xs) * 1.15);
  font-weight: 700;
  border-radius: var(--radius-full);
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

/* 안내 박스 — combos-info 재사용 */

/* 게임 선택 카드 — combos-box 재사용 */
.sim-select-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
}
.sim-select-card__title {
  font-size: calc(var(--text-base) * 1.15 * 1.08);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.sim-select-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.sim-select-row .combos-select {
  flex: 1;
  min-width: 120px;
}

/* 당첨번호 입력 카드 */
.sim-winning-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
}
.sim-winning-card__title {
  font-size: calc(var(--text-base) * 1.15 * 1.08);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}
.sim-winning-card__sub {
  font-size: calc(var(--text-xs) * 1.15);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* 당첨번호 슬롯 미리보기 (카드 안) */
.sim-winning-slots {
  display: flex;
  flex-direction: column;
  align-items: center; /* 모바일 기본: 가운데 */
  gap: 8px;
  margin-bottom: var(--space-md);
}


  .sim-winning-slots {
    align-items: flex-start; /* 데스크톱 전용: 왼쪽 정렬 */
  }

.sim-winning-slots-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.sim-winning-slot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px dashed var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--text-sm) * 1.15);
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-bg);
  flex-shrink: 0;
}
/* 선택된 번호 슬롯 — 모달과 동일한 색상 */
.sim-winning-slot.num-r1 { background:#f59e0b; color:#fff; border:2px solid #f59e0b; }
.sim-winning-slot.num-r2 { background:#3b82f6; color:#fff; border:2px solid #3b82f6; }
.sim-winning-slot.num-r3 { background:#ef4444; color:#fff; border:2px solid #ef4444; }
.sim-winning-slot.num-r4 { background:#6b7280; color:#fff; border:2px solid #6b7280; }
.sim-winning-slot.num-r5 { background:#22c55e; color:#fff; border:2px solid #22c55e; }
.sim-winning-slot.num-r6 { background:#ec4899; color:#fff; border:2px solid #ec4899; }
.sim-winning-slot.num-r7 { background:#f97316; color:#fff; border:2px solid #f97316; }
.sim-winning-slot.num-r8 { background:#06b6d4; color:#fff; border:2px solid #06b6d4; }
.sim-winning-slot.num-r9 { background:#8b5cf6; color:#fff; border:2px solid #8b5cf6; }
.sim-winning-slot--sep {
  font-size: calc(var(--text-lg) * 1.15);
  color: var(--color-text-muted);
  font-weight: 300;
  flex-shrink: 0;
}

/* 당첨번호 입력 버튼 — combos-select 높이 맞춤 */
.sim-winning-btn {
  padding: 10px 24px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: calc(var(--text-base) * 1.15);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
  background: #EAF3DE;
  border: 1.5px solid #C0DD97;
  color: #3B6D11;
}

/* 서브 탭 패널 */
.sim-panel { display: none; }
.sim-panel.is-active { display: block; }

/* ── 제외수 선택 카드 ──────────────────────────────────── */
.sim-exclude-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}
.sim-exclude-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.sim-exclude-title {
  font-size: calc(var(--text-base) * 1.15 * 1.08);
  font-weight: 700;
  color: var(--color-text);
  margin-right: 2px;
}
.sim-exclude-subtitle {
  font-size: calc(var(--text-xs) * 1.15);
  color: var(--color-text-muted);
  font-weight: 400;
}
.sim-exclude-total {
  font-size: calc(var(--text-xs) * 1.15);
  font-weight: 700;
  color: #f59e0b;
  margin-left: 4px;
}
.sim-exclude-prob {
  font-size: calc(var(--text-xs) * 1.15);
  color: #22a36a;
  font-weight: 500;
  margin-bottom: var(--space-md);
}
.sim-exclude-numpad,
.sim-bonus-numpad {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: fit-content;
  margin-bottom: var(--space-sm);
}
.sim-exclude-numpad__top {
  background: #e8eef7;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
}
.sim-exclude-numpad__body {
  padding: var(--space-sm) var(--space-md);
}
.sim-exclude-no-game {
  grid-column: 1 / -1;
  padding: var(--space-md) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  white-space: normal;
}
.sim-exclude-numpad__bottom {
  background: #e8eef7;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
}
.sim-exclude-range-label {
  font-size: calc(var(--text-sm) * 1.15);
  color: var(--color-text);
  font-weight: 700;
}
.sim-exclude-grid {
  display: grid;
  grid-template-columns: repeat(7, 40px);
  gap: 6px;
}
.sim-exclude-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  font-family: var(--font-base);
  font-size: calc(var(--text-sm) * 1.15);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sim-exclude-btn:hover {
  border-color: var(--color-text-muted);
  background: var(--color-primary-light);
}
.sim-exclude-btn.is-excluded {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
  font-weight: 700;
}
.sim-exclude-reset {
  padding: 7px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: calc(var(--text-sm) * 1.15);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
  background: var(--color-bg-white);
  border: 1.5px solid #c5d2e4;
  color: #3a4a5c;
}
.sim-exclude-reset:hover {
  background: #dbe6f4;
  border-color: #a0b4cc;
}
.sim-exclude-reset:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── 터치 영역 보정 (모바일 전용) ──────────────────────────────
   Apple HIG / Material Design 최소 터치 타깃: 44×44px
   데스크탑에는 영향 없도록 max-width: 767px 내부에 작성
   ──────────────────────────────────────────────────────────── */







/* ── 데스크톱 폰트 크기 표준화 (시뮬레이터 전용) ───────── */
  /* 공유 — 박스/테이블/필터 */
  .combos-box__title                     { font-size: 14px; }
  .combos-box__my-badge                  { font-size: 11px; padding: 3px 10px; }
  .combos-select                         { font-size: 13px; min-height: 32px; padding: 4px 8px; }
  .ranking-update .combos-select         { font-size: 13px; min-height: 32px; }
  .combos-th                             { font-size: 12px; padding: 9px 12px; }
  .combos-td                             { font-size: 13px; padding: 10px 12px; }
  .combos-nick-name                      { font-size: 13px; }
  .combos-nick-game                      { font-size: 10px; }
  .combos-page-btn                       { font-size: 13px; }
  .ranking-tab-btn                       { font-size: 13px; }
  .ranking-update                        { font-size: 11px; padding-bottom: 8px; }
  .combos-info__row                      { font-size: 13px; }
  .combos-game-tab                       { font-size: 13px; }
  .combos-stat-bar__label,
  .combos-stat-bar__val                  { font-size: 12px; }
  .combos-numpad-title                   { font-size: 13px; }
  .combos-numpad-btn                     { font-size: 13px; }
  .combos-run-btn                        { font-size: 13px; }
  .combos-richball-btn                   { font-size: 13px; }
  .combos-cal-title                      { font-size: 13px; }
  .combos-result-col-label               { font-size: 13px; }
  .combos-result-col-date                { font-size: 11px; }
  .combos-coming__title                  { font-size: 14px; }
  .combos-coming__desc                   { font-size: 13px; }
  .combos-coming--sm .combos-coming__title { font-size: 13px; }
  .combos-coming--sm .combos-coming__desc  { font-size: 11px; }

  /* 결과 탭 — 데스크톱 3컬럼 그리드 */
  .combos-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-md);
    align-items: stretch;
  }
  /* QR 탭 — 데스크톱 2컬럼 그리드 (달력 | 결과박스) */
  .qr-result-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-md);
    align-items: stretch;
  }
  .combos-cal-box { margin-bottom: 0; }

  /* 대시보드 */
  .profile-card__grade                   { font-size: 12px; }
  .profile-card__name                    { font-size: 16px; }
  .profile-card__stat-num                { font-size: 20px; }
  .profile-card__stat-label              { font-size: 12px; }
  .rank-card__title                      { font-size: 14px; }
  .rank-card__num-big                    { font-size: 28px; }
  .rank-card__num-unit                   { font-size: 13px; }
  .rank-card__right-label                { font-size: 12px; }
  .rank-card__bar-pct                    { font-size: 12px; }
  .rank-card__stat-val                   { font-size: 16px; }
  .rank-card__stat-label                 { font-size: 12px; }

  /* 시뮬레이터 — 카드 타이틀 + 모달 타이틀 */
  .sim-select-card__title,
  .sim-winning-card__title,
  .sim-exclude-title,
  .sim-filter-title,
  .sim-count-title,
  .sim-result-card__title,
  .txt-upload-card__title,
  .hist-filter-card__title,
  .hist-res-card__title,
  .modal__title                          { font-size: var(--text-md); }
  /* 시뮬레이터 + 모달 — 탭/버튼/입력/번호판 */
  .sim-tab                               { font-size: var(--text-sm); }
  .sim-help-inline-btn,
  .sim-winning-slot,
  .sim-winning-btn,
  .sim-exclude-range-label,
  .sim-exclude-btn,
  .sim-exclude-reset,
  .sim-filter-name, .sim-filter-prefix,
  .sim-filter-kw, .sim-filter-select,
  .sim-filter-unit, .sim-filter-auto-val,
  .sim-filter-num-input,
  .sim-count-label, .sim-count-input,
  .sim-run-btn,
  .sim-run-notice,
  .sim-out-btn, .sim-result-placeholder,
  .txt-upload-drop__main,
  .txt-upload-btn,
  .txt-upload-file-info__name,
  .hist-period-label, .hist-period-sel,
  .hist-period-tilde, .hist-period-count,
  .hist-filter-item, .hist-res-tab,
  .modal__game-label,
  .modal__num                            { font-size: var(--text-sm); }
  .modal__count                          { font-size: var(--text-xs); }

/* ── 색상 오버라이드: 초록 → 파란색 ─────────────────────── */
:root {
  --color-accent:       #1e44a0;
  --color-accent-light: #dbeafe;
  --color-accent-bg:    #eff6ff;
}

.sim-run-btn,
.sim-help-btn,
.sim-help-inline-btn,
.sim-winning-btn,
.combos-run-btn,
.sim-out-btn--primary,
.txt-upload-btn {
  background:   #dbeafe;
  color:        #1e3a8a;
  border-color: #93c5fd;
}
.sim-run-btn:hover,
.sim-help-btn:hover,
.sim-help-inline-btn:hover,
.sim-winning-btn:hover,
.combos-run-btn:hover:not(:disabled),
.sim-out-btn--primary:hover,
.txt-upload-btn:hover { background: #bfdbfe; }

.modal__btn {
  border-color: #93c5fd;
  color:        #1e3a8a;
}
.modal__btn--primary {
  background:   #dbeafe;
  border-color: #93c5fd;
  color:        #1e3a8a;
}

.sim-filter-check,
.hist-filter-item input[type="checkbox"] {
  accent-color: #60a5fa;
}

.sim-exclude-prob { color: #1e44a0; }

.sim-filter-auto-val {
  border-color: #1e44a0;
  color:        #1e44a0;
}
.sim-filter-auto-label { color: #1e44a0; }

.sim-help-tag {
  background: #dbeafe;
  color:      #1e3a8a;
}

.txt-upload-drop:hover,
.txt-upload-drop.is-over {
  background: #eff6ff;
}

.txt-upload-file-info {
  background:   #eff6ff;
  border-color: #bfdbfe;
}
.txt-upload-file-info__name { color: #1e3a8a; }
.txt-upload-file-info__size { color: #60a5fa; }

.top-btn { position: fixed; right: 32px; bottom: 32px; width: 44px; height: 44px; border-radius: 50%; background: #1e44a0; color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 400; box-shadow: 0 2px 8px rgba(0,0,0,0.22); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.top-btn:hover { transform: translateY(-2px); }
.top-btn--visible { opacity: 1; pointer-events: auto; }