/* すべての要素にbox-sizing: border-boxを適用 */
* {
    box-sizing: border-box;
}

/* 全体のスタイル */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* ページ全体のスクロールを防ぐ */
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    background-color: #f0f0f0;
    height: 100vh; /* 画面いっぱいの高さを確保 */
    width: 100%;
    align-items: stretch;
}

/* ヘッダー部分 */
.header {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    text-align: center;
    flex-shrink: 0; /* ヘッダーが縮まないようにする */
    width: 100%; /* 明示的に幅を100%に設定 */
}

#editor-title {
    margin: 0; /* h1のデフォルトマージンをリセット */
    font-size: 1.5rem; /* 見た目のためにサイズを調整 */
}

/* 操作ボタンのエリア */
.controls {
    padding: 10px;
    background-color: #ddd;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0; /* コントロールが縮まないようにする */
    width: 100%; /* 明示的に幅を100%に設定 */
}

/* ボタンのスタイル */
button {
    padding: 8px 16px;
    font-size: 14px;
    border: 1px solid #888;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    margin-right: 10px;
}

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

/* エディタ全体のラッパー */
.editor-wrapper {
    flex: 1; /* 残りのスペースをすべて埋める */
    min-height: 0; /* flexboxの縮小問題を解決 */
    display: flex; /* 子要素をフレックスアイテムとして扱う */
    flex-direction: row; /* PCでは左右に並べる */
    width: 100%; /* 明示的に幅を100%に設定 */
    border: 1px solid #ccc; /* 全体の枠線 */
    background-color: #fff;
}

/* 行番号 */
.line-numbers {
    width: 40px; /* 行番号の幅 */
    background-color: #f0f0f0;
    color: #888;
    padding: 20px;
    text-align: right;
    font-family: 'monospace', 'sans-serif';
    font-size: 16px;
    line-height: 1.5;
    overflow-y: hidden;
    flex-shrink: 0;
    user-select: none;
}

/* テキストエリアとプレビューのコンテナ */
.editor-container {
    flex: 1; /* 残りのスペースをすべて埋める */
    display: flex; /* 子要素をフレックスアイテムとして扱う */
    min-width: 0; /* flexアイテムの縮小問題を解決 */
}

/* テキストエリア */
#editor {
    flex: 1;
    width: 100%;
    font-family: 'Yu Gothic', 'Meiryo', monospace, sans-serif;
    font-size: 16px;
    padding: 20px;
    border: 2px solid cornflowerblue;
    outline: none;
    resize: none;
    line-height: 1.5;
    margin: 0;
    box-sizing: border-box;
    min-height: 0; /* flexboxの縮小問題を解決 */
}

#editor.vertical-writing {
    width: 100%;
}

/* プレビューエリア */
#preview {
    flex: 1; /* 利用可能なスペースを埋める */
    min-width: 0; /* flexアイテムの縮小問題を解決 */
    padding: 20px;
    overflow-y: auto;
    background-color: #f9f9f9;
    font-family: 'Yu Gothic', 'Meiryo', monospace, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    box-sizing: border-box;
}

#preview.vertical-writing {
    width: 100%;
}

/* シンタックスハイライト用のpre/codeタグのスタイル調整 */
#preview pre, #preview code {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: none;
}

/* モバイル対応: 画面幅が狭い場合は上下に分割 */
@media (max-width: 768px) {
    .editor-wrapper {
        flex-direction: column; /* 上下に並べる */
    }
    .editor-container {
        flex-direction: column; /* 上下に並べる */
    }
    #editor {
        border-right: none; /* 左右の区切り線を削除 */
        border-bottom: 1px solid #eee; /* 上下の区切り線を追加 */
    }
}

/* 縦書きモード時のプレビューを強制的に非表示にする */
#preview.vertical-writing {
    display: none !important;
    flex: 0 !important;
}