/* ベーススタイル */

/* HTML・BODY 全体にグレー背景を適用 */
html, body {
    background-color: #eee;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: Arial, sans-serif; /* ここを追加 */
}

/* ヘッダー・フッターを画面いっぱいに広げる */
header, footer {
    width: 100vw; /* ビューポート幅で強制全幅 */
    background-color: #333;
    color: white;
    text-align: center;
    padding: 5px 0;
    font-size: 18px;
}

/* mainだけを中央に配置するように調整 */
main {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr; /* PC用初期値 */
    background-color: white;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
/* 各パネルの共通スタイル */
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; /* サムネイル画像を縮小 */
    }

}


/* スマホ用トグルボタン（常に表示したい場合） */


#togglePanelsButton:hover {
    transform: scale(1.1);
}

/* 折りたたみモードのとき左・中央パネルを非表示に */
body.folded #leftPanel,
body.folded #centerPanel {
    display: none !important;
}

/* 折りたたみモードのとき main 全体は右パネルだけ表示 */
body.folded main {
    grid-template-columns: 1fr !important;
}

#fixedButtonWrapper {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
}

#togglePanelsButton {
    background-color: #333;
    color: white;
    font-size: 16px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}


/* タブレット（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;
    }
}