개요

시나리오는 가상 분석에 사용할 셀 재정의 집합을 이름으로 저장합니다. 이 개요에서는 4월까지의 실제 매출을 고정하고 시나리오로 나머지 예측 월을 업데이트하는 연간 매출 예측을 보여 줍니다.

SpreadJS 시나리오 매니저를 사용하면 선택한 입력 셀의 여러 버전을 이름으로 저장할 수 있습니다. 시나리오를 적용하면 해당 셀이 대체되고 수식이 새 값으로 다시 계산됩니다. 이 개요에서는 선풍기의 연간 매출 예측을 사용합니다. 1월부터 4월까지는 현재 실적 데이터이고, 5월부터 12월까지는 예측 셀입니다. 사이드 패널에서 재무 손익분기 목표, 비관적 예측 또는 낙관적 예측을 적용할 수 있습니다.
var spread; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); initSpread(spread); }; function initSpread(workbook) { workbook.suspendPaint(); workbook.fromJSON(json); workbook.resumePaint(); bindControls(); refreshSummary('기준 예측'); } function bindControls() { document.getElementById('applyBreakEven').addEventListener('click', function () { applyForecast('Break-even', '손익분기 예측이 적용되었습니다.'); }); document.getElementById('applyPessimistic').addEventListener('click', function () { applyForecast('Pessimistic', '비관적 예측이 적용되었습니다.'); }); document.getElementById('applyOptimistic').addEventListener('click', function () { applyForecast('Optimistic', '낙관적 예측이 적용되었습니다.'); }); document.getElementById('restoreForecast').addEventListener('click', function () { spread.scenarioManager.restore(); refreshSummary('기준 예측'); showResult('예측이 기준 값으로 복원되었습니다.', 'success'); }); } function applyForecast(name, message) { spread.scenarioManager.restore(); if (spread.scenarioManager.apply(name)) { refreshSummary(name); showResult(message, 'success'); } else { showResult('시나리오 "' + name + '"을(를) 찾을 수 없습니다.', 'error'); } } function refreshSummary(activeName) { var sheet = spread.getSheet(0); var scenarioList = document.getElementById('scenarioList'); scenarioList.innerHTML = ''; spread.scenarioManager.all().map(getScenarioSummary).forEach(function (scenario) { var item = document.createElement('li'); item.innerHTML = '<strong>' + scenario.name + '</strong><em>' + scenario.owner + '</em><span>' + scenario.description + '</span>'; scenarioList.appendChild(item); }); document.getElementById('activeScenario').textContent = activeName; document.getElementById('totalUnits').textContent = formatNumber(sheet.getValue(15, 1)); document.getElementById('totalRevenue').textContent = formatCurrency(sheet.getValue(15, 3)); document.getElementById('totalProfit').textContent = formatCurrency(sheet.getValue(15, 5)); } function formatNumber(value) { return Math.round(value || 0).toLocaleString(); } function formatCurrency(value) { return '$' + Math.round(value || 0).toLocaleString(); } function getScenarioSummary(scenario) { var cellCount = 0; scenario.overrides.forEach(function (override) { cellCount += (override.cells || []).length; }); return { name: scenario.name, owner: getScenarioOwner(scenario.userId), description: getScenarioDescription(scenario.name), cellCount: cellCount }; } function getScenarioOwner(userId) { var users = json.users || []; for (var i = 0; i < users.length; i++) { if (users[i].id === userId) { return users[i].name; } } return '알 수 없는 소유자'; } function getScenarioDescription(name) { var descriptions = { 'Break-even': '재무 목표: 선풍기 제품군의 고정 운영 비용을 충당하는 데 필요한 매출입니다.', 'Pessimistic': '연말까지 표준 가격과 수요 감소를 반영한 매출 전망입니다.', 'Optimistic': '연말까지 수요 증가와 선택적 가격 인상을 반영한 매출 전망입니다.' }; return descriptions[name] || '시나리오는 5월부터 12월까지의 예측 셀을 재정의합니다.'; } function showResult(message, resultClass) { var result = document.getElementById('result'); result.className = 'result-container ' + resultClass; result.textContent = message; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ko-kr" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="panel-title">시나리오 개요</div> <div class="option-group action-group"> <input type="button" value="손익분기 예측 적용" id="applyBreakEven" /> <input type="button" value="비관적 예측 적용" id="applyPessimistic" /> <input type="button" value="낙관적 예측 적용" id="applyOptimistic" /> <input type="button" value="복원" id="restoreForecast" /> </div> <div id="result" class="result-container success">작업 설명</div> <div class="option-group forecast-summary"> <div><span>보기</span><strong id="activeScenario">기준 예측</strong></div> <div><span>연간 수량</span><strong id="totalUnits">0</strong></div> <div><span>매출</span><strong id="totalRevenue">$0</strong></div> <div><span>이익</span><strong id="totalProfit">$0</strong></div> </div> <div class="option-group"> <label>준비된 시나리오</label> <ul id="scenarioList" class="scenario-list"></ul> </div> </div> </div> </body> </html>
var json = { "version": "18.0.0", "name": "", "docProps": { "docPropsApp": {}, "docPropsCore": {} }, "sheetCount": 1, "users": [ { "id": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}", "name": "Ethan(VP of Sales)", "color": "#26A69A" }, { "id": "{483FF98B-BB90-4EB4-8329-761CD56778AE}", "name": "Emma(Finance Director)", "color": "#A6A634" } ], "customList": [], "defaultSheetTabStyles": {}, "builtInFileIcons": {}, "sheets": { "연간 매출 예측": { "name": "연간 매출 예측", "isSelected": true, "rowCount": 19, "columnCount": 7, "activeRow": 11, "activeCol": 4, "visible": 1, "theme": "Office", "data": { "dataTable": { "0": { "0": { "value": "선풍기 연간 매출 예측", "style": { "autoFormatter": {}, "font": "bold 16px Arial", "fontWeight": "bold", "fontSize": "16px", "fontFamily": "Arial" } } }, "1": { "0": { "value": "4월까지의 실제 매출과 나머지 기간의 예측 입력입니다." } }, "2": { "0": { "value": "월", "style": { "backColor": "#e8f4ff", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "1": { "value": "수량", "style": { "backColor": "#e8f4ff", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "2": { "value": "단가", "style": { "backColor": "#e8f4ff", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "3": { "value": "매출", "style": { "backColor": "#e8f4ff", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "4": { "value": "비용", "style": { "backColor": "#e8f4ff", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "5": { "value": "이익", "style": { "backColor": "#e8f4ff", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } } }, "3": { "0": { "value": "1월", "style": { "backColor": "#eef8f1" } }, "1": { "value": 622, "style": { "backColor": "#eef8f1", "formatter": "#,##0" } }, "2": { "value": 48, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" } }, "3": { "value": 29856, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 17416, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 12440, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "4": { "0": { "value": "2월", "style": { "backColor": "#eef8f1" } }, "1": { "value": 631, "style": { "backColor": "#eef8f1", "formatter": "#,##0" } }, "2": { "value": 48, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" } }, "3": { "value": 30288, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 17668, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 12620, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "5": { "0": { "value": "3월", "style": { "backColor": "#eef8f1" } }, "1": { "value": 713, "style": { "backColor": "#eef8f1", "formatter": "#,##0" } }, "2": { "value": 48, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" } }, "3": { "value": 34224, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 19964, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 14260, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "6": { "0": { "value": "4월", "style": { "backColor": "#eef8f1" } }, "1": { "value": 854, "style": { "backColor": "#eef8f1", "formatter": "#,##0" } }, "2": { "value": 48, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" } }, "3": { "value": 40992, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 23912, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 17080, "style": { "backColor": "#eef8f1", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "7": { "0": { "value": "5월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "formatter": "#,##0" } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "8": { "0": { "value": "6월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "formatter": "#,##0" } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "9": { "0": { "value": "7월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "#,##0", "imeMode": 1 } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "10": { "0": { "value": "8월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "#,##0", "imeMode": 1 } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "11": { "0": { "value": "9월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "#,##0", "imeMode": 1 } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "12": { "0": { "value": "10월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "#,##0", "imeMode": 1 } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "13": { "0": { "value": "11월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "#,##0", "imeMode": 1 } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "14": { "0": { "value": "12월", "style": { "backColor": "#fff8dc" } }, "1": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "#,##0", "imeMode": 1 } }, "2": { "style": { "backColor": "#fff8dc", "hAlign": 3, "vAlign": 0, "themeFont": "Body", "formatter": "$#,##0.00", "imeMode": 1 } }, "3": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 0 } }, "4": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 1 } }, "5": { "value": 0, "style": { "backColor": "#fff8dc", "formatter": "$#,##0.00" }, "formula": { "si": 2 } } }, "15": { "0": { "value": "Year Total", "style": { "backColor": "#dff3e3", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "1": { "value": 2820, "style": { "backColor": "#dff3e3", "font": "bold 12px Arial", "formatter": "#,##0", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" }, "formula": { "si": 3 } }, "2": { "style": { "backColor": "#dff3e3", "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "3": { "value": 135360, "style": { "backColor": "#dff3e3", "font": "bold 12px Arial", "formatter": "$#,##0.00", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" }, "formula": { "si": 3 } }, "4": { "value": 78960, "style": { "backColor": "#dff3e3", "font": "bold 12px Arial", "formatter": "$#,##0.00", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" }, "formula": { "si": 3 } }, "5": { "value": 56400, "style": { "backColor": "#dff3e3", "font": "bold 12px Arial", "formatter": "$#,##0.00", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" }, "formula": { "si": 3 } } }, "17": { "0": { "value": "시나리오 재정의 셀", "style": { "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } }, "1": { "value": "B8:C15", "style": { "font": "bold 12px Arial", "fontWeight": "bold", "fontSize": "12px", "fontFamily": "Arial" } } } }, "defaultDataNode": { "style": { "themeFont": "Body" } } }, "rowHeaderData": { "defaultDataNode": { "style": { "themeFont": "Body" } } }, "colHeaderData": { "defaultDataNode": { "style": { "themeFont": "Body" } } }, "columns": [ { "size": 143 }, { "size": 88 }, { "size": 92 }, { "size": 116 }, { "size": 108 }, { "size": 116 } ], "defaultData": { "7": {}, "8": {}, "9": {}, "10": {}, "11": {}, "12": {}, "13": {}, "14": {} }, "leftCellIndex": 0, "topCellIndex": 0, "selections": { "0": { "row": 11, "col": 4, "rowCount": 1, "colCount": 1 }, "length": 1 }, "rowOutlines": { "items": [] }, "columnOutlines": { "items": [] }, "cellStates": {}, "states": {}, "outlineColumnOptions": {}, "autoMergeRangeInfos": [], "sharedFormulas": { "0": { "formula": "B4*C4", "baseRow": 3, "baseColumn": 3, "lastRow": 14, "lastColumn": 3 }, "1": { "formula": "B4*28", "baseRow": 3, "baseColumn": 4, "lastRow": 14, "lastColumn": 4 }, "2": { "formula": "D4-E4", "baseRow": 3, "baseColumn": 5, "lastRow": 14, "lastColumn": 5 }, "3": { "formula": "SUM(B4:B15)", "baseRow": 15, "baseColumn": 1, "lastRow": 15, "lastColumn": 5 }, "nextIndex": 4 }, "printInfo": { "paperSize": { "width": 850, "height": 1100, "kind": 1 } }, "gridline": { "showVerticalGridline": false }, "index": 0, "order": 0 } }, "sheetTabCount": 0, "namedPatterns": {}, "scenarios": { "Break-even": { "name": "Break-even", "userId": "{483FF98B-BB90-4EB4-8329-761CD56778AE}", "overrides": [ { "sheetName": "연간 매출 예측", "dataTable": { "7": { "1": { "value": 900 }, "2": { "value": 48 } }, "8": { "1": { "value": 1000 }, "2": { "value": 48 } }, "9": { "1": { "value": 1200 }, "2": { "value": 48 } }, "10": { "1": { "value": 1200 }, "2": { "value": 48 } }, "11": { "1": { "value": 1000 }, "2": { "value": 48 } }, "12": { "1": { "value": 800 }, "2": { "value": 48 } }, "13": { "1": { "value": 600 }, "2": { "value": 48 } }, "14": { "1": { "value": 600 }, "2": { "value": 48 } } } } ] }, "Pessimistic": { "name": "Pessimistic", "userId": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}", "overrides": [ { "sheetName": "연간 매출 예측", "dataTable": { "7": { "1": { "value": 960 }, "2": { "value": 48 } }, "8": { "1": { "value": 1100 }, "2": { "value": 48 } }, "9": { "1": { "value": 1800 }, "2": { "value": 48 } }, "10": { "1": { "value": 1800 }, "2": { "value": 48 } }, "11": { "1": { "value": 1200 }, "2": { "value": 48 } }, "12": { "1": { "value": 800 }, "2": { "value": 48 } }, "13": { "1": { "value": 600 }, "2": { "value": 48 } }, "14": { "1": { "value": 600 }, "2": { "value": 48 } } } } ] }, "Optimistic": { "name": "Optimistic", "userId": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}", "overrides": [ { "sheetName": "연간 매출 예측", "dataTable": { "7": { "1": { "value": 1000 }, "2": { "value": 48 } }, "8": { "1": { "value": 1400 }, "2": { "value": 55 } }, "9": { "1": { "value": 2300 }, "2": { "value": 55 } }, "10": { "1": { "value": 2300 }, "2": { "value": 55 } }, "11": { "1": { "value": 1400 }, "2": { "value": 48 } }, "12": { "1": { "value": 1000 }, "2": { "value": 48 } }, "13": { "1": { "value": 700 }, "2": { "value": 48 } }, "14": { "1": { "value": 700 }, "2": { "value": 48 } } } } ] } }, "scenarioAdditionalInfo": { "appliedScenarios": {}, "baseValues": { "연간 매출 예측": {} } }, "pivotCaches": {} };
html, body { height: 100%; margin: 0; overflow: hidden; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; font-family: Arial, sans-serif; } .sample-spreadsheets { width: calc(100% - 340px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 340px; height: 100%; padding: 16px; box-sizing: border-box; background: #fafafa; border-left: 1px solid #ddd; overflow: auto; } .panel-title { color: #243447; font-size: 18px; font-weight: bold; margin-bottom: 8px; } .panel-copy { color: #555; font-size: 12px; line-height: 1.5; margin-bottom: 14px; } .option-group { margin-bottom: 14px; } .option-group label { display: block; margin-bottom: 8px; color: #333; font-weight: bold; font-size: 12px; } input[type=button] { width: 100%; padding: 9px 8px; margin-bottom: 8px; background: #1668a8; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; } input[type=button]:hover { background: #0f4f82; } .action-group input:nth-child(1) { background: #6f5a2c; } .action-group input:nth-child(1):hover { background: #584621; } .action-group input:nth-child(3) { background: #287a3e; } .action-group input:nth-child(3):hover { background: #1f6431; } .action-group input:nth-child(4) { background: #6f5a2c; } .action-group input:nth-child(4):hover { background: #584621; } .result-container, .forecast-summary { border: 1px solid #ddd; border-radius: 4px; background: #fff; } .result-container { min-height: 34px; padding: 9px; margin-bottom: 14px; box-sizing: border-box; font-size: 12px; line-height: 1.35; } .success { color: #155724; background: #d4edda; border-color: #c3e6cb; } .error { color: #721c24; background: #f8d7da; border-color: #f5c6cb; } .forecast-summary { padding: 10px; font-size: 12px; } .forecast-summary div { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .forecast-summary div:last-child { margin-bottom: 0; } .scenario-list { margin: 0; padding: 0; list-style: none; } .scenario-list li { padding: 10px; margin-bottom: 8px; border: 1px solid #ddd; border-radius: 4px; background: #fff; } .scenario-list strong, .scenario-list em, .scenario-list span { display: block; } .scenario-list strong { margin-bottom: 4px; } .scenario-list em { color: #555; font-size: 11px; font-style: normal; margin-bottom: 4px; } .scenario-list span { color: #555; font-size: 12px; line-height: 1.35; }