:root{--body-bg: linear-gradient(135deg, #ffefba, #ffffff 60%, #f0f4ff);--card-bg: rgba(255, 255, 255, .95);--text-color: #222;--h1-color: #1f3c88;--subtitle-color: #666;--h2-color: #555;--history-item-bg: #f7f7f7;--history-item-text: #444;--border-color: #e5e5e5}body.dark-mode{--body-bg: linear-gradient(135deg, #1a1a2e, #16213e 60%, #0f3460);--card-bg: rgba(30, 30, 50, .95);--text-color: #e0e0e0;--h1-color: #4ecca3;--subtitle-color: #aaa;--h2-color: #ccc;--history-item-bg: #2d2d44;--history-item-text: #ddd;--border-color: #444}*{box-sizing:border-box}body{margin:0;font-family:Pretendard,Segoe UI,sans-serif;background:var(--body-bg);color:var(--text-color);display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px;transition:background .3s ease,color .3s ease}.card{position:relative;width:min(100%,720px);background:var(--card-bg);border-radius:24px;box-shadow:0 16px 40px #0000001f;padding:32px;text-align:center;transition:background .3s ease,box-shadow .3s ease}.theme-toggle{position:absolute;top:20px;right:20px;background:none;border:none;font-size:1.5rem;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.theme-toggle:hover{background:#0000000d}body.dark-mode .theme-toggle:hover{background:#ffffff1a}h1{margin:0 0 10px;font-size:2rem;color:var(--h1-color)}.subtitle{margin:0 0 24px;color:var(--subtitle-color);font-size:1rem}button#drawBtn{border:none;padding:14px 24px;border-radius:999px;background:linear-gradient(90deg,#ff7a00,#ffb347);color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .2s ease}button#drawBtn:hover{transform:translateY(-2px)}.result-row{margin:28px 0 20px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.ball{width:62px;height:62px;border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;font-size:1.2rem;font-weight:700;box-shadow:inset 0 -6px 6px #00000026}.bonus{background:linear-gradient(135deg,#4a4a4a,#222)}.history{margin-top:20px;padding-top:16px;border-top:1px solid var(--border-color);text-align:left}.history h2{font-size:1rem;margin:0 0 10px;color:var(--h2-color)}.history-list{display:flex;flex-wrap:wrap;gap:8px}.history-item{background:var(--history-item-bg);padding:8px 10px;border-radius:999px;font-size:.95rem;color:var(--history-item-text)}@media (max-width: 600px){.card{padding:24px}.ball{width:54px;height:54px;font-size:1rem}}.contact{margin-top:28px;padding-top:24px;border-top:1px solid var(--border-color);text-align:left}.contact h2{font-size:1.1rem;margin:0 0 16px;color:var(--h2-color);display:flex;align-items:center;gap:6px}.contact-form{display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:.85rem;font-weight:600;color:var(--h2-color)}.form-group input,.form-group textarea{width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--border-color);background:var(--history-item-bg);color:var(--text-color);font-family:inherit;font-size:.9rem;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--subtitle-color);opacity:.7}.form-group input:focus,.form-group textarea:focus{border-color:#ff7a00;box-shadow:0 0 0 3px #ff7a0026}body.dark-mode .form-group input:focus,body.dark-mode .form-group textarea:focus{border-color:#4ecca3;box-shadow:0 0 0 3px #4ecca326}.contact-form button[type=submit]{border:none;padding:14px;border-radius:8px;background:linear-gradient(90deg,#ff7a00,#ffb347);color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;margin-top:8px}.contact-form button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ff7a0033}