/* ============================================================ * KraftLotto — 자체 디자인 토큰 + Bootstrap 5 합성 * - 다크모드는 로 토글 * ============================================================ */ :root, [data-bs-theme="light"] { --kraft-bg: #f7f8fb; --kraft-surface: #ffffff; --kraft-muted: #6b7280; } [data-bs-theme="dark"] { --kraft-bg: #0e1116; --kraft-surface: #161a22; --kraft-muted: #9aa3b2; } html, body { background: var(--kraft-bg); } body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; } /* Navbar / Footer */ .kraft-navbar { background: var(--kraft-surface); border-bottom: 1px solid var(--bs-border-color); } .kraft-footer { background: var(--kraft-surface); } /* Card */ .kraft-card { border: 1px solid var(--bs-border-color); border-radius: 8px; background: var(--kraft-surface); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04); } [data-bs-theme="dark"] .kraft-card { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.35); } /* 6볼 */ .kraft-balls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .kraft-ball { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.05)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.15); } .kraft-ball.b1 { background: #fbc400; color: #3b2e00; } .kraft-ball.b2 { background: #69c8f2; color: #0a3a4a; } .kraft-ball.b3 { background: #ff7272; } .kraft-ball.b4 { background: #aaaaaa; color: #1c1c1c; } .kraft-ball.b5 { background: #b0d840; color: #22330a; } .kraft-ball.bonus { outline: 2px dashed var(--bs-primary); outline-offset: 2px; } .kraft-ball-plus { color: var(--kraft-muted); margin: 0 4px; user-select: none; } /* 조합 행 */ .kraft-combo { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--bs-border-color); } .kraft-combo:first-child { border-top: 0; } .kraft-combo .idx { width: 26px; color: var(--kraft-muted); font-variant-numeric: tabular-nums; font-size: 12px; } /* Key/Value */ .kraft-kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin-top: 12px; margin-bottom: 0; } .kraft-kv dt { color: var(--kraft-muted); font-weight: 500; } .kraft-kv dd { margin: 0; font-variant-numeric: tabular-nums; } /* 빈도 그리드 */ .kraft-freq-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; } .kraft-freq-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 8px; background: var(--kraft-bg); border: 1px solid var(--bs-border-color); } .kraft-freq-cell .n { font-weight: 700; font-size: 13px; } .kraft-freq-cell .bar { width: 100%; height: 4px; background: var(--bs-border-color); border-radius: 99px; overflow: hidden; } .kraft-freq-cell .bar > i { display: block; height: 100%; background: var(--bs-primary); } .kraft-freq-cell small { color: var(--kraft-muted); font-variant-numeric: tabular-nums; } @media (max-width: 575.98px) { .kraft-freq-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* 회차 목록 (페이지네이션) */ .kraft-list { display: flex; flex-direction: column; gap: 6px; } .kraft-list-row { display: grid; grid-template-columns: 88px 110px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--bs-border-color); border-radius: 8px; background: var(--kraft-bg); } .kraft-list-row .round { font-weight: 700; } .kraft-list-row .date { color: var(--kraft-muted); font-size: 12px; font-variant-numeric: tabular-nums; } @media (max-width: 575.98px) { .kraft-list-row { grid-template-columns: 1fr; } } /* Toast */ .kraft-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; transition: transform .25s, opacity .25s; will-change: transform, opacity; background: var(--kraft-surface); border: 1px solid var(--bs-border-color); padding: 10px 14px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.15); z-index: 1080; max-width: 90vw; } .kraft-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .kraft-toast.error { border-color: var(--bs-danger); color: var(--bs-danger); } /* 움직임 감소 선호 사용자: 전환 효과 비활성화 */ @media (prefers-reduced-motion: reduce) { .kraft-toast { transition: none; } }