:root {
    --bg-app: #f5f5f5;
    --bg-toolbar: #f0f0f0;
    --fg-toolbar-text: #333;
    --border-color: #ccc;
    --fg-body: #000;
    --bg-dropdown: #fff;
    --fg-dropdown: #333;
    --fg-dropdown-hover: #e0e0e0;
    --border-dropdown: #bbb;
    --bg-button-hover: #e0e0e0;
    --bg-button-active: #c8d8f8;
    --border-button-active: #6688cc;
    --bg-panel-preview: #f5f5f5;
    --fg-preview: #212529;
    --link-color: #0366d6;
    --bg-code-block: #f8f8f8;
    --fg-code: #24292e;
    --border-code: #ddd;
    --code-toolbar-bg: #e0e0e0;
    --code-toolbar-hover: #c0c0c0;
    --code-filename-color: #555;
    --bg-dragbar: #ccc;
    --bg-dragbar-hover: #bbb;
    --md-hr-bg: #ddd;
    --md-blockquote-bg: #f8f9fa;
    --md-borderquote: #dde;
    --fg-quote-text: darksalmon;
    --md-table-header-bg: #f0f0f0;
    --md-table-border: #bbb;
    --katex-color-map-initial: none;
    --mermaid-bg-fill: #fff;
}

[data-theme="dark"] {
    --bg-app: #1e1e1e;
    --bg-toolbar: #2d2d2d;
    --fg-toolbar-text: #ccc;
    --border-color: #555;
    --fg-body: #e0e0e0;
    --bg-dropdown: #3c3c3c;
    --fg-dropdown: #e0e0e0;
    --fg-dropdown-hover: #4a4a4a;
    --border-dropdown: #555;
    --bg-button-hover: #444;
    --bg-button-active: #38385a;
    --border-button-active: #6688cc;
    --bg-panel-preview: #1e1e1e;
    --fg-preview: #d4d4d4;
    --link-color: #569cd6;
    --bg-code-block: #2d2d2d;
    --fg-code: #d4d4d4;
    --border-code: #555;
    --code-toolbar-bg: #444;
    --code-toolbar-hover: #5a5a5a;
    --code-filename-color: #999;
    --bg-dragbar: #444;
    --bg-dragbar-hover: #555;
    --md-hr-bg: #555;
    --md-blockquote-bg: #2d2d2d;
    --md-borderquote: #444;
    --fg-quote-text: tomato;
    --md-table-header-bg: #3c3c3c;
    --md-table-border: #555;
    --katex-color-map-initial: initial;
    --mermaid-bg-fill: transparent;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: sans-serif;
    background: var(--bg-app);
    color: var(--fg-body);
}

#container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ====== メニューバー / ツールバー行 ===== */
#toolbar-row {
    display: flex;
    align-items: center;
    background: var(--bg-toolbar);
    border-bottom: 1px solid var(--border-color);
    user-select: none;
    padding: 4px 8px;
    flex-shrink: 0;
}

#menubar {
    display: flex;
}

#menubar > .menu {
    position: relative;
    margin-right: 12px;
    cursor: default;
}

#menubar > .menu > .title {
    padding: 2px 6px;
    color: var(--fg-toolbar-text);
}

#menubar .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-dropdown);
    border: 1px solid var(--border-dropdown);
    min-width: 140px;
    z-index: 100;
    box-shadow: 2px 2px 5px rgba(0,0,0,.2);
}

#menubar .dropdown button {
    width: 100%;
    padding: 4px 8px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--fg-dropdown);
}

#menubar .dropdown button:hover {
    background: var(--fg-dropdown-hover);
}

#menubar .menu.open > .dropdown {
    display: block;
}

/* ====== レイアウト制御ボタン群 ===== */
#layout-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    border-left: 1px solid var(--border-color);
    padding-left: 8px;
}

#layout-controls button {
    font-size: 0.95rem;
    padding: 2px 6px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    border-radius: 3px;
    min-width: 26px;
    color: var(--fg-toolbar-text);
}

#layout-controls button:hover {
    background: var(--bg-button-hover);
}

#layout-controls button.active {
    background: var(--bg-button-active);
    border-color: var(--border-button-active);
}

/* ====== 分割エリアコンテナ ===== */
#split-area {
    display: none;
    flex: 1;
    min-height: 0;
}

#split-area.visible {
    display: flex;
}

/* 上下二分割 → column */
#split-area.split-horizontal {
    flex-direction: column;
}

/* 左右二分割 → row */
#split-area.split-vertical {
    flex-direction: row;
}

/* order-reverse でプレビュー側が先 */
#split-area.split-horizontal.order-reverse {
    flex-direction: column-reverse;
}

#split-area.split-vertical.order-reverse {
    flex-direction: row-reverse;
}

/* ====== パネル共通 ===== */
.panel-editor,
.panel-preview {
    flex: 1;
    min-height: 4em;
    min-width: 4em;
    display: flex;
    overflow: hidden;
}

/* ====== エディターパネル ===== */
#editor {
    width: 100%;
    height: 100%;
}

/* ====== プレビューパネル ===== */
.panel-preview {
    background: var(--bg-panel-preview);
    overflow: auto;
    position: relative;
}

#preview {
    padding: 1rem;
    min-width: 200px;
    flex-shrink: 0;
}

/* ====== ドラッグバー ===== */
#dragbar {
    background: var(--bg-dragbar);
    flex-shrink: 0;
    z-index: 10;
    touch-action: none;
}

#split-area.split-horizontal #dragbar {
    height: 8px;
    width: 100%;
    cursor: row-resize;
}

#split-area.split-vertical #dragbar {
    width: 8px;
    height: 100%;
    cursor: col-resize;
}

#dragbar:hover {
    background: var(--bg-dragbar-hover);
}

/* ====== Confirm dialog (Quit) ====== */
#confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.45);
    align-items: center;
    justify-content: center;
}

#confirm-overlay.visible {
    display: flex;
}

#confirm-box {
    background: var(--bg-dropdown);
    color: var(--fg-dropdown);
    border: 1px solid var(--border-dropdown);
    border-radius: 6px;
    padding: 20px 28px;
    box-shadow: 4px 4px 12px rgba(0,0,0,.3);
    text-align: center;
    max-width: 90vw;
}

#confirm-box p {
    margin: 0 0 18px;
    font-size: 1rem;
    line-height: 1.5;
}

#confirm-box .confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

#confirm-box button {
    padding: 8px 20px;
    border: 1px solid var(--border-dropdown);
    border-radius: 4px;
    background: var(--bg-toolbar);
    color: var(--fg-dropdown);
    cursor: pointer;
    font-size: .95rem;
}

#confirm-box button:hover {
    background: var(--bg-button-hover);
}