/* ------------------------------------------- */
/* モーダル（ダイアログ）のスタイル */
/* ------------------------------------------- */

/* モーダル全体の背景（オーバーレイ） */
.modal {
    display: none; 
    
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); 
    
    /* 垂直・水平中央配置のための設定 (JSで showModal が呼ばれた際に display: flex に上書きされます) */
    align-items: center; /* 垂直方向の中央寄せ */
    justify-content: center; /* 水平方向の中央寄せ */
}

/* モーダルの中身（ダイアログボックス） */
.modal-content {
    background-color: #1a1a1a; /* ダークグレーの背景 */
    color: #00ffff; /* メカニカルなシアン色をメインカラーに */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    
    /* 影と枠線でメカニカル感を強調 */
    border: 2px solid #00ffff; /* シアンの太い枠線 */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7), /* シアンのネオン風シャドウ */
                inset 0 0 8px rgba(0, 255, 255, 0.3); /* 内側にも光を追加 */
    
    padding: 30px; /* パディングを増やす */
    width: 90%;
    max-width: 750px; 
    
    /* アニメーション（オプション） */
    transform: scale(0.9);
    transition: all 0.2s ease-out;
}

.modal.show .modal-content {
    transform: scale(1);
}

/* 閉じるボタン */
.close-button {
    color: #ff00ff; /* マゼンタ色で警告・停止のイメージ */
    float: right;
    font-size: 1.1em;
    cursor: pointer;
    line-height: 1;
    text-shadow: 0 0 8px #ff00ff; 
    /* float: right; を使用しているため、次の要素に影響しないようクリア */
    clear: both; 
}

.close-button:hover {
    color: #fff;
    text-shadow: 0 0 15px #fff;
}

/* モーダル内のヘッダー/タイトル */
.modal-header {
    border-bottom: 1px dashed #00ffff; /* 破線でメカニカル感を出す */
    padding-bottom: 5px;
    margin-bottom: 15px;
}
.modal-title {
    color: #fff; /* タイトルは明るい白 */
    text-shadow: 0 0 5px #00ffff;
}
.modal-command {
    font-style: italic;
    color: #00ffff; 
    font-size: 0.9em;
}

/* モーダル内のコンテンツエリア */
.modal-body-output {
    max-height: 50vh; /* 高さを調整 */
    overflow-y: auto; 
    padding-right: 15px; /* スクロールバーのためのパディング */
    /* スクロールバーをメカニカルにするCSS（一部ブラウザのみ対応） */
    scrollbar-color: #00ffff #1a1a1a; 
    scrollbar-width: thin;
}

/* テーブルデザインの調整 */
.terminal-table {
    border-collapse: collapse;
}
.terminal-table th, .terminal-table td {
    color: #00ffff;
}
.terminal-table thead th {
    border-bottom: 1px dashed #00ffff; /* ヘッダーの線を破線に変更 */
}
/* リンクの色もメカニカルなシアンに */
.content-container a {
    color: #00ffff; 
    text-decoration: underline;
}