/* ===== ストーリー設定 折りたたみパネル ===== */
.sgtp-option-panel {
    width: 100%;
    margin-top: 10px;
    display: none;
    position: relative;
}

.sgtp-option-panel.show {
    display: flex;
}

/* .sgtp-story-settings-panel: 個別の上書きが必要になった時に利用 */
.sgtp-story-settings-panel.show {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}


/* 共通パネルベーススタイル */
.sgtp-panel-base {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-100);
    border-radius: 6px;
}

.sgtp-panel-base-title {
    font-family: var(--font-base);
    font-weight: 700;
    font-size: 13px;
    line-height: 0.9;
    color: var(--color-soft-black);
    text-align: center;
    /* flex-shrink: 0; */
}

/* 左側： カテゴリボックス */
.sgtp-category-box {
    flex: 1;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px 10px 16px 10px;
    overflow: hidden;
}

.sgtp-select-category-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 0;
}

.sgtp-category-list-container {
    flex: 1;
    width: 414px;
    position: relative;
    /* overflow: hidden; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sgtp-category-list {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 4px);
    overflow: hidden;
    justify-content: center;
}

/* カテゴリー画像 */
.sgtp-category-image-small {
    width: 206px;
    height: 119px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.sgtp-category-image-small img {
    width: 207px;
    height: 119px;
    object-fit: cover;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sgtp-category-frame {
    width: 269px;
    height: 155px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.sgtp-category-frame img {
    width: 269px;
    height: 155px;
    object-fit: cover;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sgtp-category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 59.88%, rgba(0,0,0,0.8) 100%);
    border-radius: 10px;
    pointer-events: none;
}

.sgtp-category-label {
    position: absolute;
    bottom: 16.5px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-soft-white);
    text-align: center;
    line-height: normal;
}

/* 矢印ボタン */
.sgtp-category-arrow {
    border: 1px solid var(--color-gray-100);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    background: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.sgtp-category-arrow.arrow-left {
    padding: 3px 4px 3px 2px;
}

.sgtp-category-arrow.arrow-right {
    padding: 3px 2px 3px 4px;
}

.sgtp-category-arrow:hover {
    background: var(--color-gray-50);
}

.sgtp-category-arrow:active {
    transform: scale(0.95);
}

.sgtp-category-arrow:hover svg path {
    fill: var(--color-soft-black);
}

/* グラデーションオーバーレイ */
.sgtp-category-gradient-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 155px;
    background: linear-gradient(to right, var(--color-gray-50) 10.096%, rgba(243,244,246,0) 100%);
    pointer-events: none;
}

.sgtp-category-gradient-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 155px;
    background: linear-gradient(to right, rgba(243,244,246,0) 0%, var(--color-gray-50) 90.385%);
    pointer-events: none;
}

/* ドットインジケータ */
.sgtp-category-dots-container {
    display: flex;
    justify-content: center;
    gap: 6px;
    height: 7px;
    align-items: center;
    flex-shrink: 0;
}

.sgtp-category-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-gray-200);
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    border: none;
}

.sgtp-category-dot.active {
    background: var(--color-grad-pink-purple);
}

/* 右：ストーリーオプションボックス */
.sgtp-story-option-box {
    /* flex: 1; */
    width: 434px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px 10px 6px 10px;
}

.sgtp-panel-base-title {
    font-family: var(--font-base);
    font-weight: 700;
    font-size: 13px;
    line-height: 0.9;
    color: var(--color-soft-black);
    text-align: center;
    flex-shrink: 0;
}

.sgtp-options-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* オプション行 */
.sgtp-option-row {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-bottom: 1px solid var(--color-gray-100);
    position: relative;
}

.sgtp-option-row-last {
    border-bottom: none;
}

.sgtp-option-row-label {
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 12px;
    color: var(--color-soft-black);
    line-height: 1;
    flex-shrink: 0;
}

.sgtp-option-row-label-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sgtp-narration-play-btn {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--color-soft-black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.15s ease;
}

.sgtp-narration-play-btn:hover {
    transform: scale(1.1);
}

.sgtp-narration-option-play-btn {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--color-soft-black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.6;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.sgtp-narration-option-play-btn:hover {
    opacity: 1;
    transform: scale(1.2);
}

.sgtp-narration-option-play-btn.is-playing {
    opacity: 1;
}

.sgtp-narration-voice-select .select-style1-menu {
    max-height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* ===== 参考資料添付パネル ===== */
.sgtp-reference-settings-panel.show {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* 左側：参考資料ボックス */
.sgtp-reference-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px 10px 10px 10px;
    overflow: hidden;
}

.sgtp-file-upload-list {
    width: 100%;    /* CMUpload機能がないので、隠した結果に合わせて調整*/
    height: auto;   /* CMUpload機能がないので、隠した結果に合わせて調整*/
    justify-content: center;   /* CMUpload機能がないので、隠した結果に合わせて調整*/
    /* width: 414px; CMUpload機能がないので、隠した結果に合わせて調整*/
    /* height: 309px; CMUpload機能がないので、隠した結果に合わせて調整*/
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

.sgtp-file-uploaded-frame {
    width: 102px;    /* CMUpload機能がないので、隠した結果に合わせて調整*/
    height: 102px;    /* CMUpload機能がないので、隠した結果に合わせて調整*/
    /* width: 99px;  CMUpload機能がないので、隠した結果に合わせて調整*/
    /* height: 99px;  CMUpload機能がないので、隠した結果に合わせて調整*/
    background: var(--color-gray-100);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.sgtp-file-uploaded-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sgtp-file-uploaded-frame.is-pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    box-sizing: border-box;
    background: var(--color-soft-white);
}

.sgtp-file-uploaded-frame.is-pdf img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.sgtp-file-pdf-name {
    font-family: var(--font-base);
    font-size: 9px;
    font-weight: 500;
    color: var(--color-gray-600);
    line-height: 1.2;
    text-align: center;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.sgtp-file-max-note {
    position: absolute;
    top: 8px;    /* CMUpload機能がないので、隠した結果に合わせて調整*/
    right: 8px;    /* CMUpload機能がないので、隠した結果に合わせて調整*/
    /* bottom: 0; CMUpload機能がないので、隠した結果に合わせて調整*/
    /* right: 0; CMUpload機能がないので、隠した結果に合わせて調整*/
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 10px;
    line-height: 1.2;
    color: var(--color-gray-500);
    text-align: center;
    white-space: nowrap;
}

.sgtp-file-upload-btn {
    width: 102px;    /* CMUpload機能がないので、隠した結果に合わせて調整*/
    height: 102px;    /* CMUpload機能がないので、隠した結果に合わせて調整*/
    /* width: 99px;  CMUpload機能がないので、隠した結果に合わせて調整*/
    /* height: 99px;  CMUpload機能がないので、隠した結果に合わせて調整*/
    background: var(--color-gray-100);
    border: none;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.sgtp-file-upload-btn:hover {
    background: var(--color-gray-200);
}

.sgtp-file-upload-btn svg {
    width: 16px;
    height: 16px;
}

.sgtp-file-upload-text {
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    color: var(--color-gray-600);
    text-align: center;
}

/* 右側：CMデータコンテナ */
.sgtp-cm-data-container {
    width: 434px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.sgtp-cm-top-container {
    display: flex;
    gap: 8px;
}

.sgtp-cm-upload-box {
    flex: 1;
    height: 253px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px 10px 10px 10px;
    position: relative;
    overflow: hidden;
}

.sgtp-cm-upload-container {
    width: 193px;
    height: 193px;
    display: flex;
    position: relative;
}

.sgtp-cm-upload-box .sgtp-file-upload-btn {
    width: 100%;
    height: 100%;
    flex: 1;
}

.sgtp-cm-uploaded-image {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-gray-100);
}

.sgtp-cm-uploaded-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sgtp-cm-uploaded-image.is-pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px;
    box-sizing: border-box;
    background: var(--color-soft-white);
}

.sgtp-cm-uploaded-image.is-pdf img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.sgtp-cm-only-note {
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 10px;
    line-height: 1.2;
    color: var(--color-gray-500);
    text-align: center;
    white-space: nowrap;
}

/* URLボックス */
.sgtp-url-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px 10px 10px 10px;
    position: relative;
    overflow: hidden;
}

.sgtp-url-textarea {
    width: 100%;
    flex: 1;
    background: var(--color-gray-100);
    border: none;
    border-radius: 4px;
    padding: 6px 8px;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-soft-black);
    outline: none;
    resize: none;
}

.sgtp-url-textarea::placeholder {
    color: var(--color-gray-500);
}

.sgtp-lock-cm-container {
    position: absolute;
    right: 0;
    width: 434px;
    height: 100%;
    background: var(--color-soft-white);
    opacity: 0.8;
    z-index: 10;
}

/* ===== 登場人物パネル ===== */
.sgtp-character-settings-panel.show {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* 登場人物カード */
.sgtp-character-card {
    width: 168px;
    height: 224px;
    position: relative;
    border-radius: 6px;
    border: 1px solid var(--color-gray-100);
    overflow: hidden;
    flex-shrink: 0;
}

.sgtp-character-card .file-remove-btn {
    top: 4px;
    right: 4px;
}

.sgtp-character-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.sgtp-character-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 69.712%, rgba(0,0,0,0.5) 100%);
    border-radius: 6px;
    pointer-events: none;
}

.sgtp-character-info {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.sgtp-character-name {
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.8;
    color: var(--color-soft-white);
    white-space: nowrap;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.sgtp-character-edit-btn {
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--color-soft-white);
    border-radius: 25px;
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 10px;
    line-height: 1.2;
    color: var(--color-soft-white);
    cursor: pointer;
    transition: background 0.2s ease;
}

.sgtp-character-edit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 登場人物追加ボタン */
.sgtp-character-add-btn {
    width: 168px;
    height: 224px;
    /* background: var(--color-soft-white);
    border: 1px solid var(--color-pink-purple-mid); */
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
	border: 1px solid transparent;
    background: linear-gradient(var(--color-soft-white), var(--color-soft-white)) padding-box, linear-gradient(-150deg, var(--color-main-pink) 13.77%, var(--color-main-purple) 86.23%) border-box;
    background-clip: padding-box, border-box;
}

.sgtp-character-add-btn:hover {
    /* background: rgba(233, 120, 170, 0.03); */
    background: linear-gradient(#f9f3f5, #f9f3f5) padding-box, linear-gradient(-150deg, var(--color-main-pink) 13.77%, var(--color-main-purple) 86.23%) border-box;
}

.sgtp-character-add-btn svg {
    width: 20px;
    height: 20px;
}

.sgtp-character-add-text {
    font-family: var(--font-base);
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
    color: var(--color-gray-600);
    text-align: center;
}

/* ===== メディア設定パネル ===== */
.sgtp-media-settings-panel.show {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* media option box */
.sgtp-option-row.sgtp-option-hidden {
	display: none;
}

.sgtp-media-option-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px 10px 6px 10px;
    position: relative;
}

.sgtp-option-media-style {
    height: auto;
    align-items: flex-start;
}

.sgtp-media-style-label {
    height: 46px;
    display: flex;
    align-items: center;
}

.sgtp-media-style-list {
	display: flex;
    padding: 14px 0 10px 0;
	gap: 6px;
	overflow: hidden;
	box-sizing: border-box;
}

.sgtp-media-style-card {
    display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	flex-shrink: 0;
    border: none;
	padding: 0;
    background: transparent;
}

.sgtp-media-style-thumb {
    width: 100px;
	height: 100px;
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid transparent;
	transition: background-color 0.2s ease;
	box-sizing: border-box;
    background: linear-gradient(transparent, transparent) padding-box, transparent border-box;
    background-clip: padding-box, border-box;
}

.sgtp-media-style-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.2s ease;
}

.sgtp-media-style-name {
	font-family: var(--font-base);
	font-weight: 500;
	font-size: 10px;
	color: var(--color-gray-500);
	text-align: center;
	line-height: 1.2;
	transition: color 0.2s ease;
}

.sgtp-media-style-card.selected .sgtp-media-style-thumb {
    background: linear-gradient(var(--color-soft-white), var(--color-soft-white)) padding-box, var(--color-grad-pink-purple) border-box;
}

.sgtp-media-style-card.selected .sgtp-media-style-name {
	color: var(--color-pink-purple-mid);
}

.sgtp-media-style-card:hover .sgtp-media-style-thumb img {
	transform: scale(1.1);
}

/* ===== スチール生成モデル・枚数 セクション ===== */
.sgtp-option-model-count-row {
    height: auto;
    align-items: flex-start;
}

.sgtp-model-count-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px 50px;
    padding: 14px 0 10px 0;
}

/* .sgtp-model-count-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 50px 50px;
    width: 644px;
} */

.sgtp-model-count-container .sgrp-media-edit-modal-generate-count-controls {
    background: var(--color-gray-100);
}

.sgtp-model-count-container .sgrp-media-edit-modal-generate-count-btn:hover {
    background: var(--color-gray-200);
}

.sgtp-option-model-count-label {
    height: 46px;
    display: flex;
    align-items: center;
}

.sgtp-model-count-container .sgrp-media-edit-modal-generate-count-row {
    height: auto;
}