/* レイアウト(サイドバー + コンテンツ) */

/* IME候補とフォームコントロールをライト配色で統一する */
html,
body,
#app {
    color-scheme: only light;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
textarea,
select {
    color-scheme: light;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
textarea {
    -webkit-text-fill-color: currentColor;
    caret-color: currentColor;
}

#app.story-navigation-pending-app,
#app.story-navigation-pending-app * {
    cursor: wait !important;
}

.layout-root {
    display: grid;
    grid-template-columns: auto 1fr; /* サイドバーの実寸に追従 */
    width: 100%;
    height: 100%;
    /* min-height: 100vh; */
}

.content-area {
    position: relative;
    overflow: hidden; /* content-area自体はスクロール無し */
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ページコンテナにスクロール適用 */
.content-area > .page {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ページ別content-areaパディング */
/* .content-area.page-main {
    padding-left: 10px;
    padding-right: 14px;
} */

.content-area.page-story {
    padding: 14px 14px 14px 10px;
}

.content-area.page-story-result {
    padding: 0;
}

.content-area.page-asset-image,
.content-area.page-asset-music,
.content-area.page-asset-character {
    padding: 14px 14px 14px 10px;
}

/* サイドバーの幅は折りたたみ状態で変更 */
.sidebar.collapsed { width: var(--sidebar-width-collapsed); }



/* ! 外注する前の仮データ */
.story-generator-result-page {
    display: flex;
    min-height: 100%;
}