.decision-helper {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 15px !important;
    font-family: 'Malgun Gothic', '맑은 고딕', 'Arial', sans-serif !important;
    background-color: #f5f7fa !important;
    border: 1px solid #d2d6dc !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.decision-helper * {
    box-sizing: border-box !important;
}

.decision-helper h2 {
    text-align: center !important;
    color: #1a202c !important;
    font-size: 1.6em !important;
    margin: 0 0 20px 0 !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
    color: white !important;
    padding: 12px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(66, 153, 225, 0.3) !important;
}

.main-container {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
}

.bottom-container {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 10px !important;
}

.section {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    padding: 12px !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.input-section {
    width: 30% !important;
    flex-shrink: 0 !important;
}

.decision-section {
    width: 70% !important;
    flex-shrink: 0 !important;
}

.favorites-section,
.history-section {
    flex: 1 !important;
}

.section h3 {
    font-size: 1.1em !important;
    color: #2d3748 !important;
    margin: 0 0 12px 0 !important;
    padding-bottom: 6px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.choice-count {
    font-size: 0.8em !important;
    color: #718096 !important;
    font-weight: 500 !important;
    background: #e2e8f0 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
}

/* 빠른 템플릿 */
.quick-templates {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
}

.template-btn {
    padding: 5px 10px !important;
    background: linear-gradient(135deg, #48bb78, #38a169) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 0.75em !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex: 1 !important;
}

.template-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(72, 187, 120, 0.4) !important;
}

.template-btn.active {
    background: linear-gradient(135deg, #4299e1, #3182ce) !important;
}

/* 선택지 입력 */
.choices-container {
    margin-bottom: 12px !important;
}

.choice-input-row {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    align-items: center !important;
}

.choice-input-row input {
    flex: 1 !important;
    padding: 8px 12px !important;
    border: 1px solid #cbd5e0 !important;
    border-radius: 4px !important;
    font-size: 0.9em !important;
    background: #fafafa !important;
    transition: all 0.2s ease !important;
}

.choice-input-row input:focus {
    outline: none !important;
    border-color: #4299e1 !important;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.2) !important;
    background: white !important;
}

.choice-input-row input::placeholder {
    color: #a0aec0 !important;
}

.remove-choice-btn {
    padding: 6px !important;
    background: #fed7d7 !important;
    color: #c53030 !important;
    border: 1px solid #feb2b2 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.remove-choice-btn:hover:not(:disabled) {
    background: #fc8181 !important;
    color: white !important;
}

.remove-choice-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* 컨트롤 버튼들 */
.choice-controls {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.add-choice-btn,
.shuffle-btn,
.clear-all-btn {
    padding: 6px 10px !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 0.8em !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex: 1 !important;
    justify-content: center !important;
}

.add-choice-btn {
    background: linear-gradient(135deg, #4299e1, #3182ce) !important;
    color: white !important;
}

.add-choice-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(66, 153, 225, 0.4) !important;
}

.shuffle-btn {
    background: linear-gradient(135deg, #ed8936, #dd6b20) !important;
    color: white !important;
}

.shuffle-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(237, 137, 54, 0.4) !important;
}

.clear-all-btn {
    background: linear-gradient(135deg, #f56565, #e53e3e) !important;
    color: white !important;
}

.clear-all-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(245, 101, 101, 0.4) !important;
}

/* 슬롯 머신 스타일 */
.slot-machine {
    margin-bottom: 15px !important;
}

.slot-display {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border: 2px solid #4c51bf !important;
    border-radius: 8px !important;
    padding: 30px 20px !important;
    text-align: center !important;
    min-height: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.slot-text {
    font-size: 1.8em !important;
    font-weight: 700 !important;
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    word-break: keep-all !important;
    line-height: 1.3 !important;
}

.slot-spinning {
    animation: slotSpin 0.1s linear infinite !important;
}

.slot-result {
    font-size: 2.2em !important;
    animation: resultGlow 1.5s ease-in-out !important;
}

@keyframes slotSpin {
    0%, 100% { transform: translateY(0px); opacity: 1; }
    50% { transform: translateY(-5px); opacity: 0.7; }
}

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

/* 결정 컨트롤 */
.decision-controls {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
}

.decide-btn,
.again-btn {
    flex: 1 !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 1.1em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.decide-btn {
    background: linear-gradient(135deg, #48bb78, #38a169) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3) !important;
}

.decide-btn:hover:not(:disabled) {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4) !important;
}

.decide-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.again-btn {
    background: linear-gradient(135deg, #ed8936, #dd6b20) !important;
    color: white !important;
}

.again-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(237, 137, 54, 0.4) !important;
}

/* 최근 결과 표시 */
.recent-result {
    background: #f7fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.recent-label {
    font-size: 0.9em !important;
    color: #4a5568 !important;
    font-weight: 500 !important;
}

.recent-text {
    font-size: 1em !important;
    color: #2d3748 !important;
    font-weight: 600 !important;
}

/* 즐겨찾기 섹션 */
.favorite-input {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.favorite-input input {
    flex: 1 !important;
    padding: 8px 12px !important;
    border: 1px solid #cbd5e0 !important;
    border-radius: 4px !important;
    font-size: 0.85em !important;
    background: #fafafa !important;
}

.favorite-input input:focus {
    outline: none !important;
    border-color: #4299e1 !important;
    background: white !important;
}

.save-favorite-btn {
    padding: 8px 16px !important;
    background: linear-gradient(135deg, #ed8936, #dd6b20) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 0.8em !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.save-favorite-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(237, 137, 54, 0.4) !important;
}

/* 즐겨찾기 및 히스토리 목록 */
.favorites-list,
.history-list {
    max-height: 160px !important;
    overflow-y: auto !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    background: #fafafa !important;
}

.empty-message {
    padding: 20px !important;
    text-align: center !important;
    color: #a0aec0 !important;
    font-style: italic !important;
    font-size: 0.85em !important;
}

.favorite-item,
.history-item {
    padding: 8px 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: background-color 0.2s ease !important;
}

.favorite-item:hover,
.history-item:hover {
    background: #f7fafc !important;
}

.favorite-item:last-child,
.history-item:last-child {
    border-bottom: none !important;
}

.favorite-info,
.history-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.favorite-name,
.history-result {
    font-weight: 600 !important;
    color: #2d3748 !important;
    margin-bottom: 2px !important;
    font-size: 0.9em !important;
}

.favorite-choices,
.history-choices {
    font-size: 0.75em !important;
    color: #718096 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.history-date {
    font-size: 0.7em !important;
    color: #a0aec0 !important;
    margin-top: 2px !important;
}

.favorite-actions,
.history-actions {
    display: flex !important;
    gap: 4px !important;
}

.load-favorite-btn,
.decide-favorite-btn,
.delete-favorite-btn,
.replay-btn {
    padding: 4px 8px !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    font-size: 0.7em !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.load-favorite-btn,
.replay-btn {
    background: #bee3f8 !important;
    color: #2b6cb0 !important;
}

.load-favorite-btn:hover,
.replay-btn:hover {
    background: #90cdf4 !important;
}

.decide-favorite-btn {
    background: #c6f6d5 !important;
    color: #22543d !important;
}

.decide-favorite-btn:hover {
    background: #9ae6b4 !important;
}

.delete-favorite-btn {
    background: #fed7d7 !important;
    color: #c53030 !important;
}

.delete-favorite-btn:hover {
    background: #fc8181 !important;
    color: white !important;
}

/* 히스토리 컨트롤 */
.history-controls {
    margin-bottom: 12px !important;
    text-align: right !important;
}

.clear-history-btn {
    padding: 6px 12px !important;
    background: linear-gradient(135deg, #f56565, #e53e3e) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 0.8em !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.clear-history-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(245, 101, 101, 0.4) !important;
}

/* 공지사항 */
.notice {
    text-align: center !important;
    font-size: 0.8em !important;
    color: #4a5568 !important;
    padding: 10px !important;
    background: linear-gradient(135deg, #fef5e7, #fed7aa) !important;
    border: 1px solid #f6ad55 !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
}

.notice strong {
    color: #c05621 !important;
}

/* 스핀 상태 */
.spinning .decide-btn {
    animation: pulse 1s ease-in-out infinite !important;
}

@keyframes pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .decision-helper {
        padding: 8px !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    .decision-helper h2 {
        font-size: 1.3em !important;
        padding: 10px !important;
        margin-bottom: 15px !important;
    }
    
    .main-container,
    .bottom-container {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .input-section,
    .decision-section {
        width: 100% !important;
    }
    
    .section {
        padding: 10px !important;
    }
    
    .section h3 {
        font-size: 1em !important;
        margin-bottom: 10px !important;
    }
    
    .quick-templates {
        gap: 3px !important;
    }
    
    .template-btn {
        padding: 4px 8px !important;
        font-size: 0.7em !important;
    }
    
    .choice-input-row {
        gap: 4px !important;
    }
    
    .choice-input-row input {
        padding: 6px 10px !important;
        font-size: 0.85em !important;
    }
    
    .choice-controls {
        gap: 4px !important;
    }
    
    .add-choice-btn,
    .shuffle-btn,
    .clear-all-btn {
        padding: 5px 8px !important;
        font-size: 0.75em !important;
    }
    
    .slot-display {
        padding: 20px 15px !important;
        min-height: 80px !important;
    }
    
    .slot-text {
        font-size: 1.4em !important;
    }
    
    .slot-result {
        font-size: 1.8em !important;
    }
    
    .decide-btn,
    .again-btn {
        padding: 10px 16px !important;
        font-size: 0.95em !important;
    }
    
    .favorite-input {
        flex-direction: column !important;
        gap: 6px !important;
    }
    
    .favorites-list,
    .history-list {
        max-height: 120px !important;
    }
    
    .favorite-item,
    .history-item {
        padding: 6px 10px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    
    .favorite-actions,
    .history-actions {
        align-self: stretch !important;
        justify-content: flex-end !important;
    }
    
    .notice {
        font-size: 0.75em !important;
        padding: 8px !important;
    }
}

@media (max-width: 480px) {
    .decision-helper {
        padding: 5px !important;
    }
    
    .decision-helper h2 {
        font-size: 1.1em !important;
        padding: 8px !important;
    }
    
    .section {
        padding: 8px !important;
    }
    
    .slot-display {
        padding: 15px 10px !important;
        min-height: 60px !important;
    }
    
    .slot-text {
        font-size: 1.2em !important;
    }
    
    .slot-result {
        font-size: 1.5em !important;
    }
    
    .template-btn {
        padding: 3px 6px !important;
        font-size: 0.65em !important;
    }
    
    .choice-input-row input {
        font-size: 0.8em !important;
        padding: 5px 8px !important;
    }
    
    .decide-btn,
    .again-btn {
        padding: 8px 12px !important;
        font-size: 0.9em !important;
    }
}