/* Lottie Editor UI - Bridal & Responsive Theme */
:root {
    --bg-main: #f9f8f6; /* ��ƂȂ�I�t�z���C�g */
    --bg-panel: #ffffff; /* �p�l���̔� */
    --text-color: #5d5d5d; /* ��{�̃e�L�X�g�F */
    --border-color: #e8e6e3; /* ���E�� */
    --accent-gold: #c0a47c; /* ��i�ȃS�[���h */
    --accent-gold-hover: #ad916b;
    --btn-secondary-bg: #f5f5f5;
    --btn-secondary-border: #ddd;
    --btn-danger-bg: #e57373;
    --btn-danger-hover: #d32f2f;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Noto Sans JP', 'Helvetica', 'Arial', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-color);
}

#lottie-editor-ui {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    background-color: var(--bg-main);
}

/* ------------------------------
 * Header (Top Bar)
 * ------------------------------ */
.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background-color: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.header-group-left, .header-group-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.btn-editor {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-editor .icon { font-size: 16px; }

/* Button Styles */
.btn-primary { background-color: var(--accent-gold); color: white; border-color: var(--accent-gold); }
.btn-primary:hover { background-color: var(--accent-gold-hover); border-color: var(--accent-gold-hover); }
.btn-secondary { background-color: var(--btn-secondary-bg); color: var(--text-color); border: 1px solid var(--btn-secondary-border); }
.btn-secondary:hover { background-color: #e9e9e9; }
.btn-danger { background-color: var(--btn-danger-bg); color: white; }
.btn-danger:hover { background-color: var(--btn-danger-hover); }
.btn-success { background-color: var(--accent-gold); color: white; } /* Export button */
.btn-success:hover { background-color: var(--accent-gold-hover); }

/* Dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--bg-panel);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 10;
    right: 0;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}
.dropdown-content a:hover { background-color: var(--bg-main); }
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .btn-editor { background-color: var(--accent-gold-hover); }

/* ------------------------------
 * Main Area (Edit & Preview)
 * ------------------------------ */
.editor-main {
    display: flex;
    flex-grow: 1;
    min-height: 0;
    gap: 20px;
    padding: 20px;
}
.editor-panel-left, .editor-panel-right {
    background-color: var(--bg-panel);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.editor-panel-left { flex: 1; }
.editor-panel-right { flex: 1.5; } /* �v���r���[�������L�߂� */

/* Left Panel - Edit Area */
.edit-area-wrapper h3 {
    margin-top: 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    font-weight: 500;
}
#current-edit-image-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-main);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    overflow: hidden;
}
#current-edit-image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-position: center;
    transform-origin: center center;
    image-orientation: from-image;
    max-width: 100%;
    object-fit: contain;
}

/* 写真全体を表示（余白あり） */
#current-edit-image-container[data-fit="contain"] #current-edit-image {
  height: 100%;
  max-height: 100% !important;
  object-fit: contain;
}

/* 枠全体にフィット（隙間なし） */
#current-edit-image-container[data-fit="cover"] #current-edit-image {
  height: auto;
  max-height: unset;
  object-fit: cover;
}



#image-placeholder { color: #aaa; text-align: center; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; }
#current-edit-comment {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: var(--text-color);
    font-size: 16px;
    resize: vertical;
    min-height: 12%;
}

/* Right Panel - Preview Area */
#lottie-container-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
#lottie-container {
    width: 100%;
    max-width: 100%;
    max-height: 94%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 6px;
}
#lottie-controls { display: flex; width: 100%; align-items: center; gap: 15px; margin-top: 15px; }
#lottie-controls button { background: var(--btn-secondary-bg); color: var(--text-color); border: 1px solid var(--btn-secondary-border); border-radius: 5px; width: 40px; height: 30px; font-size: 16px; cursor: pointer; }
#lottie-controls input[type="range"] { flex-grow: 1; }
#lottie-controls span { font-family: monospace; font-size: 14px; width: 100px; color: var(--text-color); }

/* ------------------------------
 * Footer (Tabs & Timeline)
 * ------------------------------ */
.editor-footer {
    flex-shrink: 0;
    background-color: var(--bg-panel);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
}

/* Part Tabs */
.editor-tabs {
    display: flex;
    gap: 5px;
    padding: 10px 20px 10px; /* 下の余白を調整 */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
/* �^�u�ƃ^�C�����C���̃X�N���[���o�[���\���ɂ���i�X���C�v����͉”\�j */
.editor-tabs::-webkit-scrollbar, .timeline-scroll-wrapper::-webkit-scrollbar {
    display: none;
}
.tab-item {
    flex-shrink: 0; /* �^�u���k�܂Ȃ��悤�ɂ��� */
    padding: 10px 20px;
    border: none;
    border-bottom: 3px solid transparent;
    background-color: transparent;
    color: #999;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap; /* �^�u�������s���Ȃ��悤�� */
}
.tab-item:hover { color: #333; }
.tab-item.active {
    color: var(--text-color);
    font-weight: bold;
    border-bottom-color: var(--accent-gold);
}

/* Image Timeline */
.editor-timeline { padding: 15px 0 10px; }
.timeline-scroll-wrapper {
    display: flex;
    gap: 15px;
    padding: 15px 20px; /* 上下の余白を調整 */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.timeline-item {
    flex-shrink: 0;
    width: 140px;
    height: 78px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid var(--border-color);
    transition: all 0.2s ease;
}
.timeline-item:hover { border-color: var(--accent-gold); }
.timeline-item.selected {
    border-color: var(--accent-gold);
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(192, 164, 124, 0.5);
}
.timeline-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------
 * Timeline Text & Placeholder Card Styles
 * ------------------------------ */
 
/* �e�L�X�g�J�[�h�Ɖ摜�v���[�X�z���_�[�ɋ��ʂ̃X�^�C����K�p */
.timeline-item--text,
.timeline-item--placeholder {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    gap: 5px;
    /* �j���������g�����A�e�L�X�g�J�[�h�Ɠ��������ɓ��� */
    border: 3px solid var(--border-color);
}

/* �����̃J�[�h�Ŏg����A�C�R���̃X�^�C�� */
.timeline-item--text .card-icon,
.timeline-item--placeholder .card-icon {
    font-size: 24px;
    font-weight: bold;
    color: var(--accent-gold);
    line-height: 1;
}

/* �����̃J�[�h�Ŏg���郉�x���̃X�^�C�� */
.timeline-item--text .card-label,
.timeline-item--placeholder .card-label {
    font-size: 13px;
    color: var(--text-color);
    text-align: center;
    line-height: 1.3;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* �v���[�X�z���_�[�̃��x�����������������Ė��ݒ芴���c�� */
.timeline-item--placeholder .card-label {
    color: #999;
}


/* ------------------------------
 * Dynamically Generated Button Styles
 * (���̃Z�N�V������CSS�̖����ɒlj�)
 * ------------------------------ */
#lottie-data-controls button {
    padding: 8px 16px;
    border: 1px solid var(--btn-secondary-border);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--btn-secondary-bg);
    color: var(--text-color);
}

#lottie-data-controls button:hover {
    background-color: #e9e9e9;
}

#lottie-save-status {
    font-weight: bold;
    color: var(--accent-gold);
    margin-left: 10px;
}

#item-editor-wrapper {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    /* PCで表示されるスクロールバーの領域を確保 */
    padding-right: 15px; 
}

/* --- ボタンの操作感を向上させるスタイル --- */

/* キーボードフォーカス時のスタイル（青い枠線などを消し、独自スタイルを適用） */
.btn-editor:focus-visible, .tab-item:focus-visible, #lottie-controls button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(192, 164, 124, 0.4); /* アクセントカラーの薄い影 */
}

/* クリック／タップ時のスタイル */
.btn-editor:active, #lottie-controls button:active {
    transform: scale(0.98); /* わずかに小さくして押した感を出す */
}

/* 無効化された時のスタイル */
.btn-editor:disabled, #lottie-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* --- モーダルの閉じるボタンのスタイル --- */
.modal-close-btn {
    background: transparent;
    border: none;
    padding: 8px;
    font-size: 24px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close-btn:hover {
    color: var(--text-color);
}

/* --- ハンバーガーメニュー用のオーバーレイ --- */
.editor-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 104; /* メニュー本体(.header-menu)より下、他の要素より上 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.editor-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ==============================================
 * Header Styles (PC / Default)
 * ============================================== */

/* ハンバーガーメニューボタンはPCでは常に非表示 */
#hamburger-btn {
    display: none;
}

/* * #lottie-data-controlsがPCでは通常のボタン郡として機能するように定義 
 * （.header-menuというクラス名もHTMLに追加した場合を想定）
 */
#lottie-data-controls, .header-menu {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ------------------------------
 * Drag-to-Scroll Styles
 * (���̃Z�N�V������CSS�̖����ɒlj�)
 * ------------------------------ */

/* �^�C�����C���Ƀ}�E�X����������̃J�[�\�� */
.timeline-scroll-wrapper {
    cursor: grab;
}

/* �^�C�����C�����h���b�O���Ă���Œ��̃J�[�\�� */
.timeline-scroll-wrapper.active-drag {
    cursor: grabbing;
}

/* ------------------------------
 * Timeline Card Caption Styles
 * (���̃Z�N�V������CSS�̖����ɒlj�)
 * ------------------------------ */
.timeline-item {
    position: relative; /* �L���v�V�������d�˂邽�߂̊�ʒu */
}

.card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* �������̍��w�i */
    color: white;
    font-size: 12px;
    padding: 4px;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* �͂ݏo�����e�L�X�g�́u...�v�ŏȗ� */
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* ------------------------------
 * Timeline Image Placeholder Card Styles
 * (���̃Z�N�V������CSS�̖����ɒlj�)
 * ------------------------------ */
.timeline-item--placeholder {
    background-color: #ffffff;
    border: 2px dashed var(--border-color); /* �j���Ŗ��ݒ芴��\�� */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    gap: 5px;
}

.timeline-item--placeholder .card-icon {
    font-size: 24px; /* �A�C�R���������傫�� */
    line-height: 1;
    filter: grayscale(80%);
}

.timeline-item--placeholder .card-label {
    font-size: 13px;
    color: #999; /* ���x���̐F���������� */
    text-align: center;
    line-height: 1.3;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------
 * Timeline Card Animation
 * (���̃Z�N�V������CSS�̖����ɒlj�)
 * ------------------------------ */

/* �A�j���[�V�����̒�` */
@keyframes fadeInUp {
  /* �J�n���i�����ŁA�������ɂ����ԁj */
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  /* �I�����i�s�����ŁA��ʒu�ɂ����ԁj */
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* �A�j���[�V������K�p���邽�߂̃N���X */
.timeline-item.fade-in-up {
  /* ��Œ�`���� fadeInUp �A�j���[�V������0.4�b�����Ď��s */
  animation: fadeInUp 1s ease-out forwards;
}

/* ===================================================
 * Controls Styles (Refined Layout)
 * =================================================== */

/* --- 画像アップロードボタン --- */
.image-upload-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    /*padding-bottom: 20px;*/
    /*border-bottom: 1px solid var(--border-color);*/
}
.file-upload-btn, .library-btn {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--btn-secondary-border);
    border-radius: 5px;
    background-color: var(--btn-secondary-bg);
    color: var(--text-color);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease;
}
.library-btn {
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
    color: white;
}
.file-upload-btn:hover { background-color: #e9e9e9; }
.library-btn:hover { background-color: var(--accent-gold-hover); }

/* --- 詳細設定エリア --- */
#additional-settings {
    padding-top: 5px;
    /*margin-top: 20px;
    border-top: 1px solid var(--border-color);*/
}
.controls-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 10px; /* 縦と横の隙間を調整 */
}
.control-group {
    display: flex;
    flex-direction: column;
}

/* ★★★ ここからが今回の主な修正箇所 ★★★ */

/* テキストや写真の詳細設定（スライダーなど） */
.control-group.control-group-full {
    grid-column: 1 / -1;
    /* 横並びにして、垂直方向を中央揃えに */
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap; /* 画面が狭い場合は折り返す */
    gap: 10px; /* ラベルと入力欄の間隔 */
}

.control-group label {
    font-size: 13px;
    color: #888;
    margin-bottom: 5px;
    white-space: nowrap; /* ラベルが折り返さないように */
}

/* 横並びにしたため、ラベルの幅と下のマージンを調整 */
.control-group.control-group-full label {
    flex-basis: 110px; /* ラベルの基本幅を設定して、見た目を揃える */
    flex-shrink: 0; /* ラベルが縮まないように */
    margin-bottom: 0;
}

/* 横並びにしたため、入力欄が残りの幅を埋めるように調整 */
.control-group.control-group-full input,
.control-group.control-group-full select {
    flex-grow: 1; /* 残りのスペースをすべて埋める */
    min-width: 120px; /* 折り返すための最小幅 */
}

.control-group input,
.control-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
.control-group input[type="color"] {
    padding: 4px;
    height: 38px;
}


/* ------------------------------
 * Timeline Edited Text Card Styles
 * (このセクションをCSSの末尾に追加)
 * ------------------------------ */

/* 編集済みのテキストカードに適用するスタイル */
.timeline-item--text.is-edited {
    background-color: #fff8e1; /* 背景を薄いクリーム色に変更 */
    border-color: var(--accent-gold); /* 枠線の色をゴールドに */
}

/* カード内のテキスト抜粋を表示する要素のスタイル */
.card-excerpt {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}


/* -------------------------------------------
 * Timeline Edited Text Card (Final Version)
 * ------------------------------------------- */

/* 編集済みのテキストカードの場合、元のアイコンとラベルは非表示 */
.timeline-item--text.is-edited .card-icon,
.timeline-item--text.is-edited .card-label {
    display: none;
}

/* 編集済みのテキストカードの場合、抜粋表示をメインコンテンツとしてスタイル調整 */
.timeline-item--text.is-edited .card-excerpt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    font-style: normal;
    color: var(--text-color);
    font-size: 14px;
    margin-top: 0;
    padding: 5px; /* 内側に少し余白を持たせる */
    box-sizing: border-box;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ▼▼▼【ここからが新しいスタイル】▼▼▼ */
/* 編集済みテキストカードに、ラベル用のキャプションを追加 */
.timeline-item--text.is-edited .card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 12px;
    padding: 4px;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}


/* ===================================================
 * BGM MODAL STYLES (INTEGRATED & REFINED)
 * 2つのモーダル（楽曲選択・スロット設定）で共通利用
 * =================================================== */

/* 1. モーダル基本構造 (共通) */
/* ------------------------------ */

/* モーダル背景のオーバーレイ */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}

/* モーダル本体 */
.modal-content {
    background-color: var(--bg-panel);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* モーダルヘッダー */
.modal-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}
.modal-header h3 { margin: 0; font-size: 18px; font-weight: 500; }

/* モーダルボディ */
.modal-body {
    flex-grow: 1; /* ★重要：ボディが残りの高さを全て使う */
    display: flex;
    flex-direction: column;
    min-height: 0; /* flexアイテムの伸長バグを防ぐ */
}

/* モーダルフッター */
.modal-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    background-color: #f5f5f5;
}

/* 2. 楽曲選択モーダル (#bgm-modal) の個別スタイル */
/* ------------------------------ */

#bgm-modal .modal-content {
    width: 90%; max-width: 700px;
    height: 85vh; max-height: 700px;
}

#bgm-modal .modal-body {
    padding: 0;
    overflow-y: hidden;
}

#bgm-modal .modal-main-content {
    padding: 20px;
    flex-grow: 1;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}

/* 試聴プレイヤー */
.bgm-preview-player {
    flex-shrink: 0; display: flex; align-items: center; gap: 15px;
    background-color: var(--bg-main); padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}
.bgm-preview-player .player-btn { flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--btn-secondary-border); border-radius: 50%; background-color: #fff; font-size: 18px; cursor: pointer; }
.bgm-preview-player .player-track { flex-grow: 1; min-width: 0; }
.bgm-preview-player .player-track span { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.bgm-preview-player .player-track input[type="range"] { width: 100%; margin-top: 5px; }
.bgm-preview-player .player-time { font-family: monospace; font-size: 14px; flex-shrink: 0; }

/* タブエリア */
.modal-tabs {
    flex-shrink: 0; display: flex; border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}
.modal-tab-item { padding: 10px 15px; cursor: pointer; border: none; background: none; color: #999; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.modal-tab-item.active { color: var(--text-color); font-weight: 500; border-bottom-color: var(--accent-gold); }

/* タブコンテンツ */
.modal-tab-content {
    display: none; flex-grow: 1; overflow-y: auto; min-height: 0;
}
.modal-tab-content.active { display: block; }

/* 3. BGMスロットモーダル (#bgm-slots-modal) の個別スタイル */
/* ------------------------------ */

#bgm-slots-modal .modal-content {
    width: 90%; max-width: 600px;
    height: auto; max-height: 80vh;
}

#bgm-slots-modal .modal-body {
    overflow-y: auto; /* スロットが多ければスクロール */
    padding: 20px;
}

/* 4. モーダル内のコンテンツスタイル (共通) */
/* ------------------------------ */

/* BGMアップロードエリア */
.bgm-upload-area { text-align: center; padding: 10px; background-color: var(--bg-main); border-radius: 6px; margin-bottom: 20px; }
.upload-notice { font-size: 12px; color: #888; margin: 8px 0 0; }

/* BGMリスト (楽曲選択モーダル内) */
.bgm-list { list-style: none; padding: 0; margin: 0; }
.bgm-list-item { display: flex; align-items: center; padding: 10px 5px; border-bottom: 1px solid var(--border-color); transition: background-color 0.2s; }
.bgm-list-item:last-child { border-bottom: none; }
.bgm-list-item:hover { background-color: #f7f7f7; }
.bgm-list-item.selected { background-color: #fff8e1; }
.bgm-list-item span { flex-grow: 1; padding: 0 10px; font-size: 14px; }

/* BGMスロット (スロットモーダル内) */
.bgm-slots-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px;
}
.bgm-slots-header h3 { margin: 0; }

.bgm-slot {
    display: flex; align-items: center; gap: 15px; background: var(--bg-main);
    padding: 10px 15px; border-radius: 6px; border: 2px solid transparent;
    transition: all 0.2s ease; margin-bottom: 10px;
}
.bgm-slot:last-child { margin-bottom: 0; }
.bgm-slot.is-selecting { border-color: var(--accent-gold); box-shadow: 0 0 10px rgba(192, 164, 124, 0.3); }
.bgm-slot .slot-label { flex-shrink: 0; font-weight: bold; width: 50px; }
.bgm-slot .slot-body { flex-grow: 1; min-width: 0; }
.bgm-slot .slot-track-name { margin: 0 0 8px 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.bgm-slot .slot-track-name.is-empty { color: #999; font-style: italic; }
.bgm-slot .slot-endtime-input {
  font-size: 16px;             /* iPhone のフォーカス時ズーム抑止 */
  height: 40px;                /* タップしやすい高さ */
  padding: 8px 10px;
  box-sizing: border-box;
  width:100px;
}.bgm-slot[data-slot-index="2"] .slot-endtime-input { display: none; }
.bgm-slot .slot-actions { display: flex; gap: 8px; flex-shrink: 0; }
.bgm-slot .slot-actions .btn-editor-small { padding: 6px 12px; font-size: 12px; }


/* --- スマホ時の最適化 --- */
@media (max-width: 768px) {
  /* 2行構成：1行目に入力欄をフル幅、2行目に目安テキスト */
  .slot-input-wrapper {
    flex-wrap: wrap;           /* 折り返しを許可 */
    gap: 8px;
  }

  .slot-input-wrapper .slot-endtime-input {
    flex: 1 1 100%;            /* 1段目は入力欄を横いっぱい */
    max-width: none;
    min-width: 0;
  }

  .slot-input-wrapper .slot-time-suggestion {
    order: 2;                  /* 2段目に配置 */
    width: 100%;
    text-align: right;         /* 右寄せ（好みで left にも可） */
    font-size: 13px;           /* 読める最小限へ（ズーム対象ではない） */
    line-height: 1.4;
  }
  .bgm-slot .slot-actions {
    flex-direction: column;      /* ボタンを上下に並べる */
    align-items: stretch;        /* 幅をそろえて全体に伸ばす */
    gap: 6px;                    /* 縦方向の余白を少し狭めに */
  }

  .bgm-slot .slot-actions .btn-editor-small {
    width: 100%;                 /* ボタン幅をスロット幅いっぱいに */
    text-align: center;          /* ボタン内テキスト中央寄せ */
  }
}

/* さらに狭い端末向けの微調整（任意） */
@media (max-width: 420px) {
  .slot-input-wrapper .slot-time-suggestion {
    font-size: 12px;
  }
}


/* ==============================
 * BGM Slot Suggestion Styles
 * ============================== */

/* inputと目安時間を横並びにするためのラッパー */
.slot-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;                   /* 入力欄と目安テキストの距離を少し広げる */
}

/* 目安時間のテキストスタイル */
.slot-time-suggestion {
    font-size: 12px;
    color: #888;
    white-space: nowrap; /* 折り返しを防ぐ */
    flex-shrink: 0; /* 幅が狭くなっても縮まないようにする */
}


/* ==============================
 * Fullscreen Button Style
 * ============================== */

#lottie-controls #fullscreen-btn {
    background: var(--btn-secondary-bg);
    color: var(--text-color);
    border: 1px solid var(--btn-secondary-border);
    border-radius: 5px;
    width: 40px;
    height: 30px;
    font-size: 20px; /* アイコンが見やすくなるように調整 */
    line-height: 0;  /* アイコンの垂直位置を中央に */
    cursor: pointer;
    transition: all 0.2s ease;
}

#lottie-controls #fullscreen-btn:hover {
    background-color: #e9e9e9;
}


/* ==============================
 * Image Interaction Overlay Styles
 * ============================== */

#current-edit-image-container {
    position:relative;
}

/* オーバーレイのコンテナ */
#image-interaction-overlay {
    /* 親要素(#current-edit-image-container)いっぱいに広がる */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 中身を中央揃えにする */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;

    background-color: rgba(0, 0, 0, 0.3); /* 少し暗くして文字を読みやすくする */
    color: white;
    border-radius: 6px; /* 親要素の角丸に合わせる */

    /* ★重要：このオーバーレイ自体はクリックできないようにする */
    pointer-events: none;

    /* ふわっと表示するための設定 */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* ★★★ JSでこのクラスを付け外しして表示を制御します ★★★ */
#image-interaction-overlay.is-visible {
    opacity: 1;
}

/* 親コンテナが操作可能な時にオーバーレイを表示する */
/*
#current-edit-image-container.is-interactive.has-image #image-interaction-overlay {
    opacity: 1;
}
*/

/* アイコンのスタイル */
#image-interaction-overlay .interaction-icon svg {
    width: 48px;
    height: 48px;
    stroke: rgba(255, 255, 255, 0.8);
}

/* テキストのスタイル */
#image-interaction-overlay .interaction-text {
    font-size: 13px;
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 4px 10px;
    border-radius: 20px;
}

.scrubber-group {
    width:100%;
}

 .scrubber-group input[type="range"] {
    width: 100%;
}



/* ===================================================
 * Responsive for Smartphones (Layout Final Version)
 * (画面幅が768px以下の場合に適用)
 * =================================================== */
@media (max-width: 768px) {

    /* --- 1. 全体レイアウトの再定義 --- */
    html, body {
        overflow: hidden;
    }

    #lottie-editor-ui {
        height: 100vh;
    }

    /* メインコンテンツのpadding-bottomをフッターの最大表示に合わせて固定 */
    .editor-main {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: 100%;
        box-sizing: border-box;
        padding-top: calc(55px + (100vw * 9 / 16) + 5px);
        
        /* フッターが完全に開いた時の高さ(約160px) + α の余白を常に確保 */
        padding-bottom: 180px; 

        padding-left: 15px;
        padding-right: 15px;
        gap: 20px;
        flex-direction: column;
    }

    /* --- 2. ヘッダー（ハンバーガーメニュー化）--- */
    .editor-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 110; /* メニューより手前に */
        height: 55px;
        padding: 0 10px 0 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between; /* 「終了ボタン」と「ハンバーガー」を両端に配置 */
        align-items: center;
    }

    #exit-editor-btn {
        font-size: 14px;
    }

    /* 古いボタン郡は非表示 */
    .header-group-right {
        display: none;
    }

    /* ハンバーガーボタンのスタイル (HTMLに追加したもの) */
    #hamburger-btn {
        padding: 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 110;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #hamburger-btn svg {
        color: var(--text-color);
    }
    
    /* メニュー本体のスタイル (HTMLで変更したもの) */
    .header-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 250px;
        height: 100%;
        padding: 70px 20px 20px;
        box-sizing: border-box;
        background-color: var(--bg-panel);
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        gap: 15px;
        transform: translateX(100%); /* 初期状態では画面の外に隠す */
        transition: transform 0.3s ease-in-out;
        z-index: 105;
    }

    /* is-openクラスが付与されたらメニューを表示 */
    .header-menu.is-open {
        transform: translateX(0);
    }

    /* メニュー内のボタンのスタイル */
    .header-menu .btn-editor {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 14px;
    }
    .header-menu #lottie-save-status {
        margin-top: auto;
        text-align: center;
        padding: 10px 0;
    }


    /* --- 3. プレビュー（右パネル）の固定表示 --- */
    .editor-panel-right {
        /* ▼▼▼【ここから変更】▼▼▼ */
        position: fixed;
        top: 55px;
        left: 0;
        right: 0;
        z-index: 90;
        padding: 0; /* paddingを削除 */
        box-sizing: border-box;
        border: none;
        border-radius: 0;
        flex-shrink: 0;
        background-color: #000;
        /* box-shadow は不要なので削除 */
        /* ▲▲▲【ここまで変更】▲▲▲ */
    }
    #lottie-container-wrapper {
        position: relative; /* 子要素を重ねるための基準位置 */
        width: 100%;
        height: auto;
    }

    #lottie-container {
        border-radius: 0;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    #lottie-controls {
        /* ▼▼▼【ここから変更】▼▼▼ */
        position: absolute; /* 動画の上に重ねる */
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 15px;
        /* 文字やアイコンを見やすくするための黒いグラデーション背景 */
        background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
        transition: opacity 0.3s ease-in-out; /* フェードイン/アウトのアニメーション */
        /* ▲▲▲【ここまで変更】▲▲▲ */
        width: 90%;
    }
    /* ▼▼▼【ここから追加】▼▼▼ */
    #lottie-controls.controls-hidden {
        opacity: 0;
        pointer-events: none; /* 透明な間はクリックできないようにする */
    }

    #lottie-controls button {
        background: transparent;
        color: white;
        border: none;
        font-size: 22px;
    }
    .scrubber-group {
        flex-grow: 1; /* 残りの幅をすべて埋める */
        display: flex;
        flex-direction: column; /* 再生バーと時間表示を縦に並べる */
        gap: 4px;
    }
    .scrubber-group input[type="range"] {
        width: 100%;
    }
    .scrubber-group span#time-display {
        color: white;
        font-size: 12px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        width: auto; /* 幅の制限を解除 */
    }
    /* ▲▲▲【ここまで追加】▲▲▲ */


    /* --- 4. 編集エリア（左パネル）の調整 --- */
    .editor-panel-left {
        order: initial;
        padding: 20px;
    }
    
    #item-editor-wrapper > h3 {
        font-size: 13px;
        margin: 0;
        padding: 0;
        border: none;
        line-height: 1em;
    }

    .current-edit-item {
        flex-direction: column;
        gap: 15px;
    }
    #current-edit-image-container {
        width: 100%;
        aspect-ratio: 16 / 9;
        flex-shrink: 0;
        margin-bottom: 0;
        /*display:none!important;*//*非表示で操作性のテスト中。PCでは２画面で編集できる。*/
    }
    .form-group {
        flex-grow: 1;
    }


    /* --- 5. フッター（開閉式）のスタイリング --- */
    .editor-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
        background-color: var(--bg-panel);

        /* ▼▼▼ ここからが変更点 ▼▼▼ */
        /* スムーズな開閉アニメーション */
        transition: transform 0.35s ease-in-out;
        
        /* 初期状態(ピーキング)：フッター自身の高さから55px分だけ上にずらして表示 */
        /* これにより、フッターの上部55pxだけが見える状態になる */
        transform: translateY(calc(100% - 55px)); 
    }
    /* is-openクラスが付いたら、フッターを完全に表示（Y軸の移動を0にする） */
    .editor-footer.is-open {
        transform: translateY(0);
    }

    /* 開閉できることを示すツマミ（インジケーター） */
    .editor-footer::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background-color: #d1d1d1;
        border-radius: 2px;
    }

    .editor-tabs {
        padding: 25px 15px 0; /* ツマミと被らないように上部の余白を調整 */
        border-bottom: 1px solid var(--border-color);
    }
    .tab-item {
        padding: 10px 15px;
        font-size: 14px;
    }
    .editor-timeline {
        padding: 10px 0;
    }
    .timeline-scroll-wrapper {
        padding: 0 15px 10px;
        gap: 10px;
    }
    .timeline-item {
        width: 120px;
        height: 67.5px;
    }
}

/* ===================================================
 * Responsive Controls Size Fix (for Smartphone)
 * =================================================== */
@media (max-width: 768px) {
    #lottie-controls {
        gap: 8px; /* 要素間の隙間を少し詰める */
        padding: 5px 10px; /* 上下左右の余白を小さくする */
    }

    #lottie-controls button {
        font-size: 20px; /* アイコンサイズを少し小さく */
        padding: 5px; /* ボタンのタップ領域を確保しつつサイズを調整 */
        flex-shrink: 0; /* ボタンが縮まないようにする */
    }
    
    .scrubber-group span#time-display {
        font-size: 11px; /* 時間表示のフォントを少し小さく */
    }
}


/* ==============================
 * Editor Panel Swipe Animation
 * ============================== */

/* アニメーションの親要素にはoverflow: hiddenを設定して、はみ出した要素を隠します */
#item-editor-wrapper {
    /*overflow: hidden;*/
}

/* アニメーションの定義 (キーフレーム) */
@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-50px); opacity: 0; }
}
@keyframes slideInRight {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(50px); opacity: 0; }
}
@keyframes slideInLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* アニメーションを適用するためのCSSクラス */
.slide-out-left {
    animation: slideOutLeft 0.2s ease-out forwards;
}
.slide-in-right {
    animation: slideInRight 0.2s ease-in forwards;
}
.slide-out-right {
    animation: slideOutRight 0.2s ease-out forwards;
}
.slide-in-left {
    animation: slideInLeft 0.2s ease-in forwards;
}


.editor-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    /*margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);*/
}
#item-header-title {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    flex-grow: 1;
    color: var(--text-color);
}
.item-nav-btn {
    background: none;
    border: none;
    color: var(--accent-gold);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}
.item-nav-btn:hover {
    background-color: #f9f8f6;
}


/* Fit Button Styles */
.quick-actions-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
}
.fit-btn {
    width: 100%;
    padding: 8px 10px !important;
    font-size: 13px !important;
    justify-content: center;
}

/* Editor Frame Overlay Styles */
#editor-frame-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3); /* 枠外を暗くするマスク効果 */
    z-index: 10;
    pointer-events: none; /* マウス操作を透過させる */
    transition: width 0.3s ease, height 0.3s ease; /* サイズ変更時にアニメーション */
}

/* ==============================
 * Advanced Controls Accordion
 * ============================== */

/* 詳細設定ボタン */

.toggle-advanced-btn {
    width: 100%;
    padding: 8px 12px;
    margin-top: 5px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}
.toggle-advanced-btn:hover {
    background-color: #e9e9e9;
}
.toggle-advanced-btn::after {
    content: '▼';
    font-size: 10px;
    transition: transform 0.3s ease;
}
.toggle-advanced-btn.is-open::after {
    transform: rotate(180deg);
}

/* 詳細設定のコンテンツを囲むラッパー */
.advanced-controls {
    overflow: hidden;
    max-height: 0; /* 初期状態では高さを0にして隠す */
    transition: max-height 0.4s ease-in-out; /* スムーズな開閉アニメーション */
    padding-top: 0;
    border-top: 1px solid transparent;
}
.advanced-controls.is-open {
    max-height: 500px; /* 開いた時の最大の高さ */
    padding-top: 20px; /* 開いた時に上の要素との余白を作る */
    border-top-color: var(--border-color); /* 開いた時に境界線を表示 */
}


/* ==============================
 * Resizable Panels Styles
 * ============================== */

/* 垂直リサイザー (左右パネルの間) */
.vertical-resizer {
    flex-shrink: 0;
    width: 10px;
    background-color: transparent;
    cursor: col-resize; /* 左右リサイズカーソル */
    transition: background-color 0.2s;
    position: relative;
}

/* 水平リサイザー (メインとフッターの間) */
.horizontal-resizer {
    height: 10px;
    background-color: transparent;
    cursor: row-resize; /* 上下リサイズカーソル */
    transition: background-color 0.2s;
    position: relative;
}

/* ホバー時に色を付けて分かりやすくする */
.vertical-resizer:hover, .horizontal-resizer:hover {
    background-color: var(--accent-gold-hover);
}

/* リサイズ中のテキスト選択を無効にするヘルパークラス */
.is-resizing {
    user-select: none;
}

/*ゲストユーザーが差し替え回数制限に達したときのポップアップ用*/
.modal-overlay.is-visible {
    display: flex;
}
.guest-limit-content {
    max-width: 450px;
}
.guest-limit-content .modal-body p {
    margin: 1em 2em;
    text-align: center;
}
.guest-limit-content .modal-footer {
    justify-content: center; // ボタンを中央揃えに
}
.guest-limit-content .modal-footer a.btn-editor { // aタグもボタン風に
    text-decoration: none;
}


/* === ツアー中のスタッキング補正 === */
html.tour-active .tour-raise-left {
  position: relative !important;
  z-index: 100020 !important; /* overlay(9999) より十分高く */
  isolation: isolate;          /* 自身の中で新たなスタックを作って衝突回避 */
}
html.tour-active .tour-lower-right {
  position: relative !important;
  z-index: 10000 !important;   /* 左より低く、しかし通常UIよりは高め */
}

/* 右パネルが作るスタッキングコンテキストをツアー中だけ抑止 */
html.tour-active .tour-neutralize-transform {
  transform: none !important;
  perspective: none !important;
  filter: none !important;
  will-change: auto !important;
  /* containが使われている場合の保険（上書き可能なら） */
  contain: initial !important;
}