
    <header class="w-full max-w-6xl mb-4">
        <h1 class="text-3xl font-bold text-slate-900 text-center md:text-left">蜃気楼ジェネレータ</h1>
    </header>

    <div class="w-full max-w-6xl bg-white rounded-xl shadow-lg p-6 md:p-8">
        <!-- Main Content Area -->
        <div class="flex flex-col md:flex-row-reverse gap-8">
            
            <!-- Right Column: Graph and Info -->
            <div class="flex-shrink-0 md:w-1/3 flex flex-col gap-4">
                <div class="w-full" style="aspect-ratio: 0.8/1;">
                    <canvas id="temperatureGraph" class="w-full h-full"></canvas>
                </div>
                 <div id="infoPanel" class="grid grid-cols-2 gap-4 text-sm">
                     <div id="p0_info" class="bg-slate-100 p-3 rounded-lg text-center"></div>
                     <div id="p1_info" class="bg-blue-50 p-3 rounded-lg text-center"></div>
                     <div id="p2_info" class="bg-red-50 p-3 rounded-lg text-center"></div>
                     <div id="p3_info" class="bg-slate-100 p-3 rounded-lg text-center"></div>
                </div>
            </div>

            <!-- Left Column: Gradient and Controls -->
            <div class="flex-grow md:w-2/3 flex flex-col gap-2">
                 <div class="flex-grow relative">
                    <canvas id="gradientCanvas" class="w-full h-full"></canvas>
                    <div id="loaderContainer" class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center hidden">
                        <div class="loader"></div>
                    </div>
                 </div>
                 <div class="flex-shrink-0 space-y-2">
                    <div>
                        <canvas id="scaleCanvas" height="30"></canvas>
                    </div>
                    <div class="flex items-center gap-4 pt-1">
                        <label for="hScale" class="text-sm font-medium text-slate-600 whitespace-nowrap">水平スケール:</label>
                        <input type="range" id="hScale" min="1" max="500" value="10" class="w-full">
                        <span id="hScaleValue" class="text-sm font-mono text-slate-700 w-20 text-right">10:1</span>
                    </div>
                    <div class="flex items-center gap-4">
                        <label for="angleStepSlider" class="text-sm font-medium text-slate-600 whitespace-nowrap">角度ステップ:</label>
                        <input type="range" id="angleStepSlider" min="0.002" max="1" value="0.1" step="0.001" class="w-full">
                        <span id="angleStepValue" class="text-sm font-mono text-slate-700 w-20 text-right">0.100°</span>
                    </div>
                    <div class="flex items-center justify-between gap-4 pt-4 border-t mt-2">
                        <div class="flex gap-2">
                            <button id="btnColor" class="control-button px-3 py-1 text-xs font-semibold bg-white border border-slate-300 rounded-md hover:bg-slate-50 transition-colors">カラー</button>
                            <button id="btnGrayscale" class="control-button px-3 py-1 text-xs font-semibold bg-white border border-slate-300 rounded-md hover:bg-slate-50 transition-colors">グレイ</button>
                        </div>
                        <div class="flex-grow">
                            <canvas id="legendCanvas" height="40"></canvas>
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="dynamicScaleCheckbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <label for="dynamicScaleCheckbox" class="text-xs text-slate-600">動的</label>
                        </div>
                    </div>
                 </div>
            </div>
        </div>

        <!-- Image Transformation Area -->
        <div class="mt-8 pt-6 border-t">
            <div class="mb-4">
                <label for="imageLoader" class="text-sm font-medium text-slate-700">風景画像を選択:</label>
                <input type="file" id="imageLoader" accept="image/*" class="mt-1 text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"/>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <h3 class="text-lg font-semibold text-center text-slate-800 mb-2">元の画像</h3>
                    <canvas id="originalImageCanvas" class="w-full border rounded-lg"></canvas>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-center text-slate-800 mb-2">変換後の画像</h3>
                    <canvas id="transformedImageCanvas" class="w-full border rounded-lg"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <footer class="w-full max-w-6xl mt-4 text-sm text-slate-500 text-center">
        <p>Mirage Generator (c) 2025 <a href="https://researchmap.jp/estherian" class="underline hover:text-blue-600">Tasuku Yoshioka</a> (<a href="https://www.tsm.toyama.toyama.jp/" class="underline hover:text-blue-600">Toyama Science Museum</a>) | <a href="#" id="helpLink" class="underline hover:text-blue-600">ヘルプ</a></p>
    </footer>

    <!-- Help Modal -->
    <div id="helpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden">
        <div class="bg-white rounded-lg shadow-xl p-6 md:p-8 max-w-2xl w-full">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-bold mt-4">これは何？</h3>
                <button id="closeHelp" class="text-3xl font-bold hover:text-red-500">&times;</button>
            </div>
            <div class="text-slate-700 space-y-4 text-sm md:text-base">
                <p>このツールは、大気の温度勾配による光の屈折（蜃気楼）をシミュレーションします。</p>
                <h3 class="font-bold mt-4">基本的な使い方</h3>
                <ol class="list-decimal list-inside space-y-2">
                    <li><strong>温度勾配：</strong> 右側のグラフの4つの制御点をドラッグし、高度に対する温度の分布を設定します。</li>
                    <li><strong>観測点：</strong> 左側のグラデーション領域をクリックし、観測点（左端に表示される黒い点）の高さを決めます。</li>
                    <li><strong>光路：</strong> 観測点を決定すると、右端の各点（光源）からの光がどのように屈折して観測点に届くかが、白い線で表示されます。</li>
                    <li><strong>風景の変換：</strong> 「風景画像を選択」ボタンから画像を読み込むと、シミュレーション結果に基づき、観測点から風景がどのように見えるか（蜃気楼）が「変換後の画像」に再現されます。</li>
                </ol>
                <h3 class="font-semibold mt-4">パラメータ調整</h3>
                <ul class="list-disc list-inside space-y-2">
                    <li><strong>水平スケール：</strong> 観測点と風景との水平距離を調整します。距離が長くなるほど、屈折の効果は顕著になります。</li>
                    <li><strong>角度ステップ：</strong> 光路計算の精度を調整します。値を小さくすると精度が上がりますが、計算に時間がかかる場合があります。</li>
                    <li><strong>動的チェックボックス：</strong> チェックを入れると、グラデーションの色の範囲が、現在の温度分布の最大値と最小値に自動で最適化されます。</li>
                </ul>
            </div>
        </div>
    </div>