/* ベーススタイル */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden; /* 横スクロールを防止 */
    transform: scale(1.1); /* 全体を110%に拡大 */
    transform-origin: top center; /* 拡大の基準を中央上部に設定 */
    width: calc(100% / 1.1); /* 横スクロールを防ぐための幅調整 */
    margin: 0 auto; /* 中央に固定 */
}

header, footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 5px 0; /* 黒いラインの幅を調整 */
    font-size: 12px; /* タイトルの文字サイズを調整 */
}

main {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr; /* 左:中央:右 = 3:4:3 の比率 */
    gap: 10px;
    padding: 10px;
    background-color: #eee;
    color: black;
    max-width: 1200px; /* 最大幅を設定 */
    margin: 0 auto; /* 中央揃え */
   
}

/* 各パネルの共通スタイル */
section {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* 内容がはみ出さないようにする */
}

/* 共通ボタンスタイル */

.common-buttons button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.common-buttons button:hover {
    background-color: #0056b3;
}

/* 左パネル */
#leftPanel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden; /* 内容がはみ出さないようにする */
}


/* サムネイルスライダー */
#thumbnailSlider {
    max-width: 100%; /* 左パネル内に収める */
    overflow-x: auto; /* 横スクロールを有効にする */
    white-space: nowrap; /* 子要素を折り返さない */
    padding: 10px 0; /* 内側余白を追加 */
    background-color: #eee; /* 背景色を設定 */
    border-top: 1px solid #ccc; /* 上部に境界線を追加 */
    box-sizing: border-box; /* ボックスサイズを適切に計算 */
}


#thumbnailSlider .thumbnails {
    display: inline-flex; /* 横並び表示 */
    gap: 10px; /* サムネイル間のスペース */
}


#thumbnailSlider .thumbnail {
    display: inline-block; /* インライン表示で整列 */
    cursor: pointer; /* クリック可能にする */
}


#thumbnailSlider .thumbnail img {
    width:50px; /* サムネイル画像の幅 */
    height: auto; /* 縦横比を維持 */
    object-fit: contain; /* 画像を枠内に収める */
    border: 2px solid transparent; /* 初期状態で透明の枠線 */
    transition: border-color 0.2s, transform 0.2s; /* アニメーション */
}


/* ホバー時のスタイル */
#thumbnailSlider .thumbnail img:hover {
    border-color: lightblue; /* ホバー時の枠線色 */
    transform: scale(1.05);
}


/* サムネイル選択時の青枠 */
#thumbnailSlider .thumbnail.selected img {
    border-color: blue;
}


/* 選択中の画像リスト項目のスタイル */
.image-item.selected-image {
    background-color: #f0f8ff; /* 背景色を淡い青に */
    border: 2px solid #007BFF; /* 青い枠線 */
    border-radius: 4px; /* 枠線を丸みを帯びた形に */
}


/* フォルダサムネイルスライダー */
#folderThumbnailSlider {
    max-width: 100%; /* 左パネル内に収める */
    overflow-x: auto; /* 横スクロールを有効にする */
    white-space: nowrap; /* 子要素を折り返さない */
    padding: 10px 0; /* 内側余白を追加 */
    background-color: #f9f9f9; /* 背景色を少し明るく */
    border-top: 1px solid #ccc; /* 上部に境界線を追加 */
    box-sizing: border-box; /* ボックスサイズを適切に計算 */
}

/* サムネイルを横並びに表示 */
#folderThumbnailSlider .thumbnails {
    display: inline-flex; /* 横並び表示 */
    gap: 10px; /* サムネイル間のスペース */
}

/* フォルダサムネイル */
#folderThumbnailSlider .thumbnail {
    display: inline-block; /* インライン表示で整列 */
    cursor: pointer; /* クリック可能にする */
}

#folderThumbnailSlider .thumbnail img {
    width:50px; /* サムネイル画像の幅 */
    height: auto; /* 縦横比を維持 */
    object-fit: contain; /* 画像を枠内に収める */
    border: 2px solid transparent; /* 初期状態で透明の枠線 */
    transition: border-color 0.2s, transform 0.2s; /* アニメーション */
}

/* ホバー時のスタイル */
#folderThumbnailSlider .thumbnail img:hover {
    border-color: #90caf9; /* ホバー時の枠線色をライトブルーに */
    transform: scale(1.05); /* ホバー時に少し拡大 */
}

/* 選択中の青枠 */
#folderThumbnailSlider .thumbnail.selected img {
    border-color: #1976d2; /* 選択時の枠線をブルーに */
}

/* カラープリセットサムネイルスライダー */
#colorPresetSliderContainer {
    margin-top: 15px; /* 他の要素との間隔を追加 */
}

#colorPresetSlider {
    max-width: 100%; /* 親要素に収める */
    overflow-x: auto; /* 横スクロールを有効にする */
    white-space: nowrap; /* 子要素を折り返さない */
    padding: 10px 0; /* 内側余白を追加 */
    background-color: #eee; /* 他のスライダーと同じ背景色に統一 */
    border-top: 1px solid #ccc; /* 上部に境界線を追加 */
    box-sizing: border-box; /* ボックスサイズを適切に計算 */
}

#colorPresetSlider .thumbnails {
    display: inline-flex; /* 横並び表示 */
    gap: 10px; /* サムネイル間のスペース */
}

#colorPresetSlider .thumbnail {
    display: inline-block; /* インライン表示で整列 */
    cursor: pointer; /* クリック可能にする */
}

#colorPresetSlider .thumbnail img {
    width: 50px; /* 他のスライダーと同じ幅に設定 */
    height: auto; /* 縦横比を維持 */
    object-fit: contain; /* 画像を枠内に収める */
    border: 2px solid transparent; /* 初期状態で透明の枠線 */
    transition: border-color 0.2s, transform 0.2s; /* アニメーション */
}

/* ホバー時のスタイル */
#colorPresetSlider .thumbnail img:hover {
    border-color: lightblue; /* ホバー時の枠線色を統一 */
    transform: scale(1.05); /* ホバー時に少し拡大 */
}

/* 選択中の青枠 */
#colorPresetSlider .thumbnail.selected img {
    border-color: blue; /* 選択時の枠線を統一 */
}

/* 中央パネル全体の固定高さ */
#centerPanel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto; /* 必要に応じて調整 */
    overflow: hidden; /* パネル自体のスクロールを無効化 */
}


#centerPanel h2 {
    margin-bottom: 10px;
}

#transformParams {
    margin-top: 10px;
}

/* 画像一覧の高さとスクロール設定 */
#imageList {
    flex: none; /* 伸縮を無効化 */
    max-height:150px; /* 高さを固定 */
    overflow-y: auto; /* 縦スクロールを有効化 */
    border: 1px solid #ccc; /* 境界線 */
    padding: 5px; /* 内側の余白 */
    background-color: #fff; /* 背景色 */
}

/* 画像リスト内の画像 */
#imageList img {
    display: block; /* 画像を縦に並べる */
    width: 100%; /* リスト全体に合わせる */
    margin-bottom: 5px; /* 画像間の余白 */
}

/* 選択中の画像項目のハイライト */
.image-item.selected {
    background-color: #f0f8ff; /* 明るい青背景 */
    border: 2px solid #007BFF; /* 青い枠線 */
    border-radius: 4px;
}

/* クリップボタンのスタイル*/

.image-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.image-item input[type="checkbox"] {
    margin-right: 5px;
    cursor: pointer;
}



/* タイトル横の共通ボタンスタイル */
.common-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}


.common-buttons button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}


.common-buttons button:hover {
    background-color: #0056b3;
}

#transformParams {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.transform-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.transform-item span {
    font-weight: bold;
}

.transform-item input[type="number"] {
    width: 60px;
    padding: 2px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    transition: border-color 0.2s;
}

.transform-item input[type="number"]:focus {
    border-color: #007bff;
    outline: none;
}


/* 右パネル */
#rightPanel {
    background-color: #333; /* 濃いグレー背景 */
    color: white;
    padding: 15px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
   
    gap: 10px;
}

#previewArea {
    width: 200px; /* プリセット画像(800px)の1/4サイズ */
    height: 625px; /* プリセット画像(2500px)の1/4サイズ */
    background-size: contain;
    background-color: #fff; /* プレビュー画像部分を白背景に設定 */
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
}

/* 共通リンクスタイル */
a {
    color: inherit; /* テキストカラーを親要素から継承 */
    text-decoration: none; /* 初期状態で下線を非表示 */
    font-size: 14px; /* フォントサイズを指定（小さめに設定） */
    transition: color 0.3s, text-decoration 0.3s; /* スムーズな変化を設定 */
}

a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
    color: inherit; /* ホバー時の色を親要素から継承 */
}

/* フッター内リンクの特別設定（オプション） */
footer nav ul {
    list-style: none; /* リストの点を非表示 */
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px; /* リンク間のスペースを設定 */
    justify-content: center;
}

footer nav ul li {
    display: inline; /* リンクを横並びに配置 */
}

footer p {
    margin: 5px 0; /* 上下の余白を少し調整 */
    font-size: 12px; /* フッターのテキストサイズも小さく設定 */
}


/* レスポンシブ対応 */
/* スマホ（768px以下） */
@media (max-width: 768px) {
    main {
        grid-template-columns: 1fr; /* 1列レイアウトに変更 */
        gap: 5px;
    }

    #leftPanel, #centerPanel, #rightPanel {
        padding: 5px;
    }

    #thumbnailSlider .thumbnail img {
        width: 60px; /* サムネイル画像を縮小 */
    }

}

/* タブレット（769px～1024px） */
@media (min-width: 769px) and (max-width: 1024px) {
    main {
        grid-template-columns: 1fr 2fr; /* 左:中央の2列構成に変更 */
        gap: 10px;
    }

    #leftPanel {
        display: none; /* 左パネルを非表示にする（必要なら） */
    }


}

/* デスクトップ（1025px以上） */
@media (min-width: 1025px) {
    main {
        grid-template-columns: 3fr 4fr 3fr;
        gap: 15px;
    }
}