/* 基本設定 */
body {
    background-color: #000;
    color: #0f0; /* ターミナル風の緑色 */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace; /* モノスペースフォント */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* スクロールはメインコンテンツ内のみ */
}

a {
    color: #0ff; /* リンクの色をシアンに */
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* ヘッダー */
.terminal-header {
    background-color: #000;
    border-bottom: 1px solid #0f0;
    padding: 10px 15px 5px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

#ascii-art {
    color: #0f0;
    font-size: 0.7em; /* アスキーアートを小さめに */
    line-height: 0.9;
    margin: 0;
}
#logo-image {
    display: block;
    max-width: 100%; /* 親要素(header)の幅に収める */ 
    height: auto; margin: 0; /* ターミナル風に画像を調整する場合、この行を追加 */
    /* filter: sepia(100%) saturate(300%) hue-rotate(90deg) brightness(80%) contrast(150%); */
    /* 画像が透過PNGなどで、色が緑色でない場合は、上記のfilterで緑色を強調できます。 */
}

.terminal-header {
    /* 画像の高さに応じてメインコンテンツのmargin-topを再調整する必要があります */
    /* 例: 画像の高さが大きくなったら、170pxから200pxなどに変更 */ 
    margin-top: 0px;
}

.header-menu {
    font-size: 0.9em;
    padding-top: 5px;
}

/* フッター */
.terminal-footer {
    background-color: #000;
    border-top: 1px solid #0f0;
    padding: 5px 15px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    font-size: 0.8em;
    text-align: right;
}

/* メインコンテンツ */
.terminal-body {
    flex-grow: 1;
    margin-top: 170px; /* ヘッダーの高さに合わせて調整 */
    margin-bottom: 35px; /* フッターの高さに合わせて調整 */
    padding: 10px 15px; /* 上下に少しパディングを追加 */
    overflow-y: auto; /* メインコンテンツのみスクロール可能 */
}

/* ターミナル出力 */
.terminal-output p {
    margin: 0;
    line-height: 1.4;
    white-space: pre-wrap; /* 改行を保持し、折り返す */
}
/* メニュー項目を区別しやすく */
.menu-item {
    padding-left: 20px;
}

/* 入力行 (position: fixedを削除) */
.terminal-input-line {
    display: flex;
    align-items: center;
    padding: 0; /* body内のpaddingを使うためリセット */
    margin-top: 5px; /* メニューとの区切り */
}

.prompt {
    margin-right: 5px;
    white-space: nowrap;
}

.command-input {
    background: none;
    border: none;
    color: #0f0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 1em;
    outline: none;
    width: 2ch; /* 1文字分の幅 */
    padding: 0;
    margin: 0;
    height: 1.2em; /* カーソルの高さと合わせる */
    caret-color: transparent; /* 標準カーソルを非表示 */
}
.command-input::-webkit-inner-spin-button,
.command-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}

.content-container {
    width: 100%;
    /* 最大幅を設定し、コンテンツが広がりすぎないように制限 */
    max-width: 800px; 
    margin: 0 auto; /* 左右マージンautoで中央寄せ */
    padding: 10px 0;
}

.terminal-table {
    width: 100%;
    /* ボーダーをなくす */
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95em;
}

.terminal-table th, .terminal-table td {
    /* ボーダーをなくすため none または 0 */
    border: none;
    padding: 5px 10px;
    text-align: left;
    color: #0f0; /* 文字色をターミナル色に */
}

.terminal-table td:first-child {
    /* 日付部分の幅を固定し、概要を際立たせる */
    width: 120px;
    white-space: nowrap;
}

/* ヘッダーやタイトル行に下線だけ引く（オプション） */
.terminal-table thead th {
    border-bottom: 1px solid #0f0;
    padding-bottom: 8px;
}

/* プレーンテキスト用 */
.content-container pre {
    /* ターミナル風のフォントを維持 */
    font-family: inherit; 
    color: inherit;
    margin: 0;
}

/* 点滅カーソル */
.cursor {
    display: inline-block;
    width: 8px; /* カーソルの幅 */
    height: 1.2em; /* 行の高さと合わせる */
    background-color: #0f0;
    margin-left: 0px;
    animation: blink 0.7s infinite step-start;
}

/* メニューリンクのスタイル */
.menu-link-item {
    margin-left: 20px; /* メニューのインデント */
    line-height: 1.4;
}

.menu-link-item a {
    /* リンクの色をターミナルカラーに */
    color: #0f0; 
    text-decoration: none;
    cursor: pointer;
    /* ホバー時に光るエフェクト */
    transition: text-shadow 0.1s; 
}

.menu-link-item a:hover {
    /* 選択された感、ホバー時に強調 */
    color: #fff;
    text-decoration: underline;
    text-shadow: 0 0 5px #0f0;
}
/* 無効化されたリンクのスタイル */
.menu-link-item a.disabled-link {
    /* クリック後にホバーエフェクトを無効化 */
    pointer-events: none; /* (JSで設定済みだが念のため) */
}

.menu-link-item a.disabled-link:hover {
    /* ホバー時の見た目の変化をすべて元に戻すか、無効にする */
    color: #0f0; /* 元の色に戻す */
    text-decoration: none;
    text-shadow: none;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

@media (max-width: 767.98px) {
    /* ヘッダーのパディング調整 */
    .terminal-header {
        padding: 5px 10px 5px;
    }
    
    /* アスキーアートのフォントサイズをさらに小さく調整 */
    #ascii-art {
        font-size: 0.5em; 
        line-height: 0.8;
    }
    
    /* ヘッダーの高さが変わるため、メインコンテンツの余白を調整 */
    .terminal-body {
        margin-top: 130px; /* 小さくなったヘッダーに合わせて調整 */
        padding: 5px 10px;
    }

    /* フッターのフォントサイズを調整 */
    .terminal-footer {
        font-size: 0.7em;
        padding: 3px 10px;
    }
}