/* ===================================================
 * 1. Base Variables & Global Settings (統合・更新)
 * =================================================== */
:root {
    /* --- 新規追加・更新された変数 --- */
    --color-primary: #c0a47c;       /* 旧 --accent-gold */
    --color-primary-hover: #b0936a; /* 旧 --accent-gold-hover */
    --color-text-main: #333333;     /* 旧 --text-color (微調整) */
    --color-text-sub: #888888;
    --color-bg-body: #f9f9fa;       /* 旧 --bg-main (微調整) */
    --color-bg-panel: #ffffff;      /* 旧 --bg-panel */
    --color-border: #eeeeee;        /* 旧 --border-color (微調整) */
    --color-input-bg: #fafafa;
    
    /* 形状・サイズ変数 */
    --radius-s: 8px;
    --radius-m: 12px;
    --btn-height: 44px;

    /* --- 既存の変数（互換性のために維持） --- */
    --bg-main: var(--color-bg-body);
    --bg-panel: var(--color-bg-panel);
    --text-color: var(--color-text-main);
    --border-color: var(--color-border);
    --accent-gold: var(--color-primary);
    --accent-gold-hover: var(--color-primary-hover);
    --btn-secondary-bg: #f5f5f5;
    --btn-secondary-border: #ddd;
    --btn-danger-bg: #e57373;
    --btn-danger-hover: #d32f2f;
}

html, body {
    /* 背景色を変数に合わせて更新 */
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
    /* その他の設定は維持 */
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Noto Sans JP', 'Helvetica', 'Arial', sans-serif;
}

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

/* ------------------------------
 * 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-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 {
    background-color: var(--color-bg-body);
    padding: 20px;
    box-sizing: border-box;
    /* 旧スタイルのflex等は維持しつつ、見た目を上書き */
    border: none; 
    box-shadow: none; 
    overflow-x: auto;
}
.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: #f0f0f0;
    /*border-radius: var(--radius-s);*/
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    border: 1px solid #eee; /* 旧 dashed を solid に変更 */
    display: flex;
    align-items: center;
    justify-content: center;
}

#current-edit-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* 旧 transform 設定などは必要に応じて維持 */
}

/* 写真全体を表示（余白あり） */
#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 {
    font-size: 12px;
    color: var(--color-text-sub);
    text-align: center;
    padding: 20px;
}
.form-group label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 600; 
    font-size: 12px;
    color: var(--color-text-sub);
}
#current-edit-comment {
    width: 100%;
    min-height: 120px;
    padding: 14px;
    box-sizing: border-box;
    
    /* iOSでのズーム防止のため16pxを指定 */
    font-size: 16px; 
    line-height: 1.6;
    color: var(--color-text-main);
    
    background-color: var(--color-input-bg);
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-s);
    resize: vertical;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
}
#current-edit-comment:focus {
    background-color: #fff;
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(192, 164, 124, 0.15);
}

#current-edit-comment::placeholder {
    color: #bbb;
    font-size: 14px;
}

/* 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 {
    background: var(--color-bg-panel);
    border-radius: var(--radius-m);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid var(--color-border);
    padding: 20px;
    
    /* スクロール等の機能は維持 */
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    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: 12px;
    margin-bottom: 15px;
    /* 旧 border-bottom 等は削除または調整 */
    padding-bottom: 0;
    border: none;
}
.file-upload-btn, .library-btn {
    width: 100%;
    height: var(--btn-height);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 0; /* height指定に伴いpadding調整 */
}
.file-upload-btn {
    background: #fff;
    border: 1px solid #ddd;
    color: var(--color-text-main);
}
.file-upload-btn:hover {
    background: #f9f9f9;
    border-color: #ccc;
}
.library-btn {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}
.library-btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-1px);
}

/* --- 詳細設定エリア --- */
#additional-settings {
    padding-top: 5px;
    /*margin-top: 20px;
    border-top: 1px solid var(--border-color);*/
}
.controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.control-group {
    display: flex;
    flex-direction: column;
}

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

/* 1行使うコントロール */
.control-group.control-group-full {
    grid-column: span 2;
    margin-bottom: 5px;
    /* フレックス解除して縦積みにリセット */
    flex-direction: column;
    align-items: stretch;
}

.control-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-sub);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    white-space: normal;
    flex-basis: auto;
}

/* 横並びにしたため、ラベルの幅と下のマージンを調整 */
.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;
}

/* 数値・テキスト入力・セレクトボックス */
.control-group input[type="number"],
.control-group input[type="text"],
.control-group select {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    
    /* スマホでズームしないように16px */
    font-size: 16px; 
    background: var(--color-input-bg);
    color: var(--color-text-main);
    box-sizing: border-box;
    flex-grow: 0;
    min-width: 0;
}

/* カラーピッカー */
.control-group input[type="color"] {
    width: 100%;
    height: 40px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
}

/* スライダー (Range) カスタムデザイン */
.control-group input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    margin: 10px 0;
    cursor: pointer;
    height: auto;
}
/* トラック */
.control-group input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: #eee;
    border-radius: 3px;
}
/* ツマミ */
.control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    margin-top: -9px; /* トラックの中央に来るように調整 */
}


/* チェックボックスエリア（新規） */
.control-group-single {
    display: flex;
    align-items: center;
    padding: 12px;
    background-color: #fffbf0;
    border: 1px solid #fde68a;
    border-radius: 6px;
    margin-top: 15px;
}
.control-group-single label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #d97706;
    font-weight: 700;
    margin: 0;
    cursor: pointer;
}
.control-group-single input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #d97706;
}


/* ------------------------------
 * 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 {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    border-radius: var(--radius-s);
}
#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;
    margin-top: 8px;
}

.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;
        width: 100%;
        box-sizing: border-box;
        max-width: 100vw;
        /* 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: 100%;
        box-sizing: border-box !important
    }
    /* ▼▼▼【ここから追加】▼▼▼ */
    #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 {
        padding: 15px;
        background-color: #f4f5f7;
        margin-top: 55px; /* ヘッダー分確保 */
    }
    
    #item-editor-wrapper > h3 {
        font-size: 13px;
        margin: 0;
        padding: 0;
        border: none;
        line-height: 1em;
    }

    .current-edit-item {
        flex-direction: column;
        gap: 15px;
    }

    .form-group {
        margin-bottom: 20px;
    }


    /* --- 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)); 
        max-width: 100vw;
        width: 100%;
    }
    /* 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: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}
#item-header-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
    text-align: center;
    flex-grow: 1;
    letter-spacing: 0.05em;
}

.item-nav-btn {
    background: transparent;
    border: none;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.item-nav-btn:hover {
    background-color: #f5f5f5;
}


.quick-actions-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
    /* GridからFlexへ変更しレイアウト調整 */
    margin-top: 0;
    padding-top: 0;
}

.fit-btn {
    flex: 1;
    height: 36px;
    font-size: 11px !important;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fit-btn:hover {
    background: #eee;
    color: #333;
}

/* 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: 12px 16px;
    background-color: #f7f7f7;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-s);
    color: #666;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
    margin-top: 5px;
}

.toggle-advanced-btn:hover {
    background-color: #eee;
}
.toggle-advanced-btn::after {
    content: '▼';
    font-size: 10px;
    transition: transform 0.3s ease;
}
/* 開いたときのスタイル */
.toggle-advanced-btn.is-open {
    border-radius: var(--radius-s) var(--radius-s) 0 0;
    background-color: #fff;
    color: var(--color-primary);
    border-bottom: 1px solid transparent;
}
.toggle-advanced-btn.is-open::after {
    transform: rotate(180deg);
}

/* アコーディオンの中身 */
.advanced-controls {
    background: #fff;
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-s) var(--radius-s);
    padding: 0 15px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    /* 旧設定の上書き */
    padding-top: 0;
}
.advanced-controls.is-open {
    padding: 20px 15px;
    max-height: 800px;
}


/* ==============================
 * 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;
    width:90vw!important;
}
.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 { 
    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;
}



/* =========================================
   Eye-Catch Overlay (自動フェードアウト版)
   ========================================= */
#eye-catch-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200; /* ウォーターマークやコントローラーより上 */
    background-color: #000;
    
    /* フレックスボックスで画像を中央配置 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    /* 初期状態 */
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* フェード中は下の操作をブロック */
}

/* 画像自体 */
.eye-catch-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいにトリミング表示 */
    object-position: center;
    
    /* 演出: 表示中にごくゆっくりズームする（高級感） */
    transform: scale(1.0);
    animation: eyeCatchZoom 5s ease-out forwards;
}

@keyframes eyeCatchZoom {
    0% { transform: scale(1.0); }
    100% { transform: scale(1.05); }
}

/* フェードアウト用クラス (JSで付与) */
#eye-catch-overlay.is-fading {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 下の要素をクリック可能にする */
}


/* ===================================================
 * Smartphone Image Modal Styles
 * =================================================== */
#close-image-modal-btn {
    display: none; /* デフォルト非表示 */
}

/* スマホ用スタイル */
@media (max-width: 768px) {

    /* 1. 通常時は非表示 */
    #current-edit-image-container {
        display: none !important; 
    }

    /* モーダル表示時のスタイル（JSで .is-mobile-modal が付与された時） */
    #current-edit-image-container.is-mobile-modal {
        display: block !important;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        /* aspect-ratio は JS制御される場合が多いが念のため指定 */
        /* aspect-ratio: 16 / 9; */
        z-index: 9999;
        background: #000;
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
        border: 2px solid rgba(255, 255, 255, 0.5);
        margin: 0;
        border-radius: 0;
    }

    /* モーダル内の画像 */
    #current-edit-image-container.is-mobile-modal img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 99999;
    }

    /* ===================================================
    * Floating Close Button (Moved to body)
    * =================================================== */
    /* 閉じるボタン（完了）のフローティングデザイン */
    #close-image-modal-btn.is-floating-active {
        /* 旧スタイルのリセット */
        width: auto;
        height: auto;
        
        /* 新デザイン適用 */
        display: flex !important;
        align-items: center;
        justify-content: center;
        
        position: fixed;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        
        min-width: 200px;
        padding: 14px 24px;
        
        background-color: var(--color-primary);
        color: #fff;
        border: 2px solid #fff;
        border-radius: 30px;
        
        font-weight: 700;
        font-size: 15px;
        letter-spacing: 0.05em;
        
        box-shadow: 0 8px 25px rgba(0,0,0,0.5);
        z-index: 100001;
        cursor: pointer;
    }

    /* トリガーボタン */
    .mobile-image-modal-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin-bottom: 20px;
    background: #8e8a8a;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s;
    }   
    .mobile-image-modal-trigger:active {
    transform: scale(0.98);
}
    .mobile-image-modal-trigger:hover {
        background-color: #555;
    }

    .control-group.control-group-full label{
        flex-basis:0px;
    }

}

/* PCではトリガーボタンを表示しない */
@media (min-width: 769px) {
    .mobile-image-modal-trigger {
        display: none !important;
    }
}




/* ==============================================
 * iOS/Mobile Pseudo-Fullscreen Fixes
 * ============================================== */

/* 1. フルスクリーンモード時に、邪魔なUIを全て消す */
body.is-fullscreen-mode .editor-header,
body.is-fullscreen-mode .editor-footer,
body.is-fullscreen-mode .editor-panel-left,
body.is-fullscreen-mode #eye-catch-overlay, /* アイキャッチが残っていた場合も消す */
body.is-fullscreen-mode #lottie-data-controls {
    display: none !important;
}

/* 2. 擬似フルスクリーンラッパーのスタイル強化 */
#lottie-container-wrapper.is-pseudo-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* スマホのアドレスバー考慮 */
    
    /* 他のあらゆる要素（モーダル等含む）より手前に */
    z-index: 2147483647 !important; 
    
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Lottie本体を画面いっぱいに */
#lottie-container-wrapper.is-pseudo-fullscreen #lottie-container {
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain; /* 比率を維持して最大化 */
}

/* 4. コントローラーを画面下部に固定し、最前面を確保 */
#lottie-container-wrapper.is-pseudo-fullscreen #lottie-controls {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 2147483648 !important; /* ラッパーよりさらに上 */
    
    /* 背景を見やすく */
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; /* iPhoneの下部バー回避 */
    opacity: 1 !important; /* 非表示になってしまうのを防ぐ */
    pointer-events: auto !important;
}

/* 5. フルスクリーン時は「戻る」ボタンを強調 */
#lottie-container-wrapper.is-pseudo-fullscreen #fullscreen-btn {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    width: 44px; /* 指で押しやすいサイズ */
    height: 44px;
}


/* クライアントワーク支援ツール用モーダル */
.client-work-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans JP", sans-serif;
}

.client-work-content {
    background: #fff;
    width: 90%;
    max-width: 800px;
    height: 85vh;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.cw-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #f9fafb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cw-header h3 {
    margin: 0;
    font-size: 18px;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cw-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    gap: 20px;
}

.cw-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cw-textarea {
    width: 100%;
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 15px;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: none;
    background: #f8fafc;
    color: #334155;
    white-space: pre;
    overflow-x: auto;
}

.cw-textarea:focus {
    outline: 2px solid #2563eb;
    background: #fff;
}

.cw-desc {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
    line-height: 1.5;
}

.cw-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background: #fff;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-cw {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: 0.2s;
}

.btn-cw-primary { background: #2563eb; color: #fff; }
.btn-cw-primary:hover { background: #1d4ed8; }
.btn-cw-copy { background: #059669; color: #fff; }
.btn-cw-copy:hover { background: #047857; }
.btn-cw-close { background: #f3f4f6; color: #374151; }
.btn-cw-close:hover { background: #e5e7eb; }

@media (max-width: 768px) {
    .cw-body { flex-direction: column; }
    .cw-textarea { height: 300px; }
}


/* モーダル内のタブ切り替えボタン */
.cw-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.cw-tab-btn {
    padding: 8px 16px;
    border: none;
    background: none;
    font-weight: bold;
    color: #6b7280;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
}

.cw-tab-btn:hover {
    background: #f3f4f6;
}

.cw-tab-btn.active {
    background: #e0e7ff;
    color: #4f46e5;
}

.cw-mode-desc {
    font-size: 12px;
    color: #4b5563;
    margin-bottom: 10px;
    background: #f9fafb;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}


/* プロジェクトマネージャー詳細UI */
.pm-layout {
    display: flex;
    height: 100%;
    gap: 20px;
    box-sizing: border-box;
}
.pm-sidebar {
    width: 220px;
    border-right: 1px solid #eee;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pm-main {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}

.pm-menu-btn {
    text-align: left;
    padding: 10px 15px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: bold;
    color: #64748b;
    transition: 0.2s;
}
.pm-menu-btn:hover { background: #f1f5f9; color: #334155; }
.pm-menu-btn.active { background: #eff6ff; color: #2563eb; }

/* ステータスバッジ */
.pm-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    background: #94a3b8;
}
.status-active { background: #22c55e; }
.status-review { background: #f59e0b; }
.status-completed { background: #3b82f6; }

/* フォーム要素 */
.pm-form-group { margin-bottom: 15px; }
.pm-form-label { display: block; font-size: 12px; font-weight: bold; margin-bottom: 5px; color: #475569; }
.pm-input, .pm-textarea, .pm-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
.pm-textarea { height: 80px; resize: vertical; }

/* 履歴リスト */
.pm-history-item {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pm-history-link { color: #2563eb; text-decoration: underline; cursor: pointer; }

@media (max-width: 600px) {
    .pm-layout { flex-direction: column; }
    .pm-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #eee; padding-bottom: 10px; }
}