가토나 할모시 배럭 큐브돌리면 보석상자 모아둿다가

계산해서 8렙나오면 한번에 까고 그랫는데

보석계산할거 검색으로 찾아도 상자 갯수넣는 계산기는 못찾고 큐브계산기밖에 못찾앗음

그래서 멍청하게 계산기로 직접 계산햇엇는데 너무 번거로워서 제미나이 시켜보니까 잔여보석도 나오고 생각보다 잘뽑힘

이런거 필요한분들 계시려나


열기쉽게 HTML로 만듬

핸드폰 인터넷으로도 쉽게 열림

메모장에 붙여넣고 확장명바꾸니까 댓슴

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로스트아크 보석 합성 계산기</title>
    <style>
        :root {
            --bg-color: #1c1e22;
            --container-bg: #282b30;
            --text-color: #ffffff;
            --accent-color: #e19c16;
            --border-color: #3e4249;
            --input-bg: #181a1d;
        }

        body {
            font-family: 'Malgun Gothic', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
        }

        .container {
            background-color: var(--container-bg);
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            width: 100%;
            max-width: 500px;
        }

        h1 {
            text-align: center;
            color: var(--accent-color);
            font-size: 24px;
            margin-bottom: 25px;
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 10px;
        }

        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            background: var(--input-bg);
            padding: 8px 15px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
        }

        .input-group label {
            flex: 1;
            font-weight: bold;
            font-size: 15px;
        }

        .input-group input {
            width: 100px;
            background: none;
            border: none;
            color: white;
            font-size: 16px;
            text-align: right;
            outline: none;
        }

        .input-group span {
            margin-left: 10px;
            color: #888;
            font-size: 14px;
            width: 30px;
        }

        button {
            width: 100%;
            padding: 12px;
            background-color: var(--accent-color);
            border: none;
            border-radius: 6px;
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.2s;
            margin-top: 10px;
        }

        button:hover {
            background-color: #c7850e;
        }

        .result-box {
            margin-top: 25px;
            background: var(--input-bg);
            border-radius: 8px;
            padding: 15px;
            border: 1px solid var(--border-color);
        }

        .result-title {
            font-weight: bold;
            color: var(--accent-color);
            margin-bottom: 15px;
            font-size: 16px;
            text-align: center;
        }

        .result-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 5px;
            border-bottom: 1px dashed #333;
            font-size: 15px;
        }

        .result-item:last-child {
            border-bottom: none;
        }

        .gem-lv {
            font-weight: bold;
        }

        .gem-count {
            color: #4caf50;
            font-weight: bold;
        }

        .gem-remain {
            font-size: 12px;
            color: #aaa;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>💎 로아 보석 합성 계산기</h1>
    
    <div id="inputs">
        <div class="input-group">
            <label>1레벨 보석</label>
            <input type="number" id="lv1" min="0" value="0" oninput="calculateGems()">
            <span>개</span>
        </div>
        <div class="input-group">
            <label>2레벨 보석</label>
            <input type="number" id="lv2" min="0" value="0" oninput="calculateGems()">
            <span>개</span>
        </div>
        <div class="input-check">
            </div>
    </div>

    <script>
        const inputsDiv = document.getElementById('inputs');
        inputsDiv.innerHTML = '';
        for(let i=1; i<=9; i++) {
            inputsDiv.innerHTML += `
                <div class="input-group">
                    <label>${i}레벨 보석 상자/보석</label>
                    <input type="number" id="lv${i}" min="0" value="0" oninput="calculateGems()">
                    <span>개</span>
                </div>
            `;
        }

        function calculateGems() {
            // 각 레벨별 보석 개수 가져오기
            let gems = Array(11).fill(0);
            for(let i=1; i<=9; i++) {
                gems[i] = parseInt(document.getElementById(`lv${i}`).value) || 0;
            }

            // 하위 레벨부터 상위 레벨로 합성 계산 (3개당 다음 레벨 1개)
            for(let i=1; i<=9; i++) {
                let nextLevelGems = Math.floor(gems[i] / 3);
                gems[i+1] += nextLevelGems;
                gems[i] = gems[i] % 3; // 합성하고 남은 보석
            }

            // 결과 화면에 반영
            let html = '';
            let hasResult = false;

            for(let i=10; i>=1; i--) {
                if(gems[i] > 0 || hasResult) {
                    hasResult = true; // 최고 레벨 이후로는 0개라도 표시해서 잔여 보석 확인
                    
                    let label = `${i}레벨 보석`;
                    if(i === 10) label = `🔥 10레벨 보석 (겁/작)`;
                    
                    html += `
                        <div class="result-item">
                            <span class="gem-lv">${label}</span>
                            <span>
                                <span class="gem-count">${gems[i]}개</span>
                                ${i < 10 && gems[i] > 0 ? `<span class="gem-remain">(남음)</span>` : ''}
                            </span>
                        </div>
                    `;
                }
            }

            if(!hasResult) {
                html = '<div style="text-align:center; color:#888;">보석 개수를 입력해주세요.</div>';
            }

            document.getElementById('result-display').innerHTML = html;
        }
    </script>

    <div class="result-box">
        <div class="result-title">⚡ 합성 예측 결과</div>
        <div id="result-display">
            <div style="text-align:center; color:#888;">보석 개수를 입력해주세요.</div>
        </div>
    </div>
</div>

</body>
</html>