/*
 * 公開側：投稿フォームのスタイルシート。
 */
/* フロントエンドフォームのスタイル */
.kurapost-form-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 25px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-family: 'Inter', sans-serif;
}

.kurapost-form-container h3 {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #333;
}

.kurapost-form-container .form-group {
    margin-bottom: 15px;
}

.kurapost-form-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
}

.kurapost-form-container input[type="text"],
.kurapost-form-container input[type="tel"],
.kurapost-form-container input[type="email"],
.kurapost-form-container textarea {
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1em;
}

.kurapost-form-container textarea {
    resize: vertical;
    min-height: 80px;
}

.kurapost-form-container input[type="file"] {
    display: block;
    margin-top: 5px;
}

/* 変更点: 新しいラッパーと縦書き表示のスタイル */
.image-field-wrapper {
    display: flex; /* Flexboxで縦書き部分と入力フィールド部分を横並びに */
    align-items: flex-start; /* 上端に揃える */
    gap: 15px; /* 縦書き部分と入力フィールドの間のスペース */
    margin-bottom: 15px; /* 各画像フィールドの間のスペース */
    border: 1px solid #ddd; /* 視覚的なグループ化のためのボーダー */
    border-radius: 6px;
    padding: 15px;
    background-color: #fff;
    box-sizing: border-box; /* paddingをwidthに含める */
}

.image-field-number-vertical {
    writing-mode: vertical-rl; /* 縦書き、右から左 */
    text-orientation: upright; /* 文字を直立させる */
    font-weight: bold;
    color: #555;
    padding: 5px;
    border-right: 1px solid #eee; /* 区切り線 */
    margin-right: 10px; /* 区切り線からのスペース */
    flex-shrink: 0; /* 縮小させない */
    font-size: 1.1em;
    display: flex; /* 中央揃えのためにflexを使用 */
    align-items: center; /* 縦方向中央揃え */
    justify-content: center; /* 横方向中央揃え */
    min-width: 30px; /* 縦書き部分の最小幅 */
}

/* image-field-groupはimage-upload-sectionのラッパーになる */
.image-field-group {
    flex-grow: 1; /* 残りのスペースを埋める */
    padding: 0;
    border: none;
    background-color: transparent;
    margin-bottom: 0;
}

/* image-upload-sectionが新しいFlexコンテナ */
.image-upload-section {
    display: flex;
    flex-direction: column; /* ファイル入力エリアとプレビュー/コメントコンテナを縦に積む */
    gap: 15px; /* ファイル入力エリアとプレビュー/コメントコンテナの間のスペース */
    width: 100%; /* 親要素の全幅を使用 */
}

.file-input-area {
    width: 100%; /* image-upload-section内で全幅を使用 */
}

/* image-previewとimage-comment-sectionを横並びにするコンテナ */
.preview-comment-container {
    display: flex;
    flex-wrap: wrap; /* 小さい画面で折り返す */
    gap: 15px; /* プレビューとコメントの間のスペース */
    width: 100%; /* image-upload-section内で全幅を使用 */
    align-items: flex-start; /* 上端に揃える */
}

.kurapost-form-container .image-preview {
    flex-shrink: 0; /* 縮小させない */
    width: 100px; /* プレビューの固定幅 */
    height: 100px; /* プレビューの固定高さ */
    margin-top: 0; /* 親要素がflexになったためリセット */
    margin-bottom: 0; /* 親要素がflexになったためリセット */
    display: flex; /* 画像を中央に配置するためにflexを使用 */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #f0f0f0;
    border-radius: 4px;
    border: 1px solid #eee; /* プレビューのボーダーを追加 */
}

.kurapost-form-container .image-preview img {
    width: 100%; /* 親要素の幅いっぱいに */
    height: 100%; /* 親要素の高さっぱいに */
    object-fit: cover; /* ★変更点: サムネイル表示のためcoverに */
    display: block;
}

.image-comment-section {
    flex-grow: 1; /* コメントセクションが残りのスペースを埋める */
    min-width: 200px; /* 最小幅 */
}

.image-field-group input[type="file"],
.image-field-group textarea {
    width: 100%; /* セクション内で全幅を使用 */
}

.kurapost-form-container .form-actions {
    margin-top: 20px;
    text-align: right;
}

.kurapost-form-container .button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-left: 10px;
}

.kurapost-form-container .button-primary {
    background-color: #0073aa;
    color: #fff;
}

.kurapost-form-container .button-primary:hover {
    background-color: #005177;
}

.kurapost-form-container .button-secondary {
    background-color: #f3f3f3;
    color: #555;
    border: 1px solid #ccc;
}

.kurapost-form-container .button-secondary:hover {
    background-color: #e0e0e0;
}

.kurapost-form-container .required {
    color: #dc3232;
    font-weight: bold;
}

.kurapost-message {
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-weight: bold;
}

.kurapost-message.success {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
}

.kurapost-message.error {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}

/* 過去の投稿を検索セクションのスタイル */
.search-past-posts-container {
    background-color: #ffffff; /* 白枠のdiv */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.search-past-posts-container h3 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: #333;
}

.search-past-posts-container .search-input-group {
    display: flex;
    align-items: flex-end; /* ボタンと入力欄の下端を揃える */
    gap: 10px;
    margin-bottom: 10px;
}

.search-past-posts-container .search-input-group label {
    flex-shrink: 0; /* ラベルが縮まないように */
    margin-bottom: 0; /* デフォルトのmargin-bottomをリセット */
    line-height: 2.2em; /* 入力欄の高さに合わせる */
}

.search-past-posts-container .search-input-group input[type="email"] {
    flex-grow: 1; /* 入力欄が残りのスペースを埋める */
    width: auto; /* width: 100% を上書き */
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1em;
}

.search-past-posts-container .search-input-group button {
    flex-shrink: 0; /* ボタンが縮まないように */
    padding: 8px 15px;
    font-size: 0.95em;
    margin-left: 0; /* デフォルトのmargin-leftをリセット */
}

/* 管理画面詳細ページのスタイル */
.wp1-kurapost-detail-container { /* このクラス名は変更していません */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-top: 20px;
}

.wp1-kurapost-detail-container .post-info-box {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #fcfcfc;
}

.wp1-kurapost-detail-container .post-info-box p {
    margin: 5px 0;
    font-size: 1.05em;
    color: #444;
}

.wp1-kurapost-detail-container h2 {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #333;
}

.wp1-kurapost-detail-container .thumbnail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.wp1-kurapost-detail-container .thumbnail-item {
    width: 80px;
    height: 80px;
    border: 2px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.wp1-kurapost-detail-container .thumbnail-item.active {
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.5);
}

.wp1-kurapost-detail-container .thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wp1-kurapost-detail-container .main-image-display {
    text-align: center;
    margin-top: 20px;
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.wp1-kurapost-detail-container .main-image-display img {
    max-width: 100%;
    height: auto;
    max-height: 500px; /* 最大高さを設定 */
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: block;
    margin: 0 auto 15px auto;
}

.wp1-kurapost-detail-container .main-image-display p {
    font-size: 1.1em;
    color: #333;
    margin: 0;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #ddd;
    display: inline-block; /* コメントの背景をテキスト幅に合わせる */
    max-width: 90%;
    word-wrap: break-word;
}

/* フロントエンドの公開リストのスタイル */
.kurapost-public-list-container {
    margin: 20px auto;
    padding: 25px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-family: 'Inter', sans-serif;
}

.kurapost-public-list-container h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.kurapost-public-list-container .search-info {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1em;
    color: #555;
    background-color: #e9f5ff;
    border: 1px solid #cce5ff;
    padding: 10px;
    border-radius: 5px;
}


.kurapost-public-list-container .post-grid {
     /* 凹んだ形の枠 */
     background-color: #f0f0f0; /* 薄い銀色 */
     border: 1px solid #ddd;
     box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1), /* 内側に影 */
                 inset -2px -2px 5px rgba(255, 255, 255, 0.7); /* 内側にハイライト */
     padding: 8px; /* 内側の余白 */
   
     /* post-itemをリスト形式に配置 */
     display: flex;
     flex-direction: column; /* 要素を縦に並べる */
     gap: 16px; /* post-item間のスペース */
}

.kurapost-public-list-container .post-item {
    display: flex; /* post-contentとpost-imageを横に並べる */
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden; /* コンテナからはみ出る内容を隠す */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/*
* post-image: post-itemからpost-contentの幅の余り
*/
.kurapost-public-list-container .post-image-wrapper {
    /* post-item内で残りのスペースを占める */
    flex-grow: 1; 
    
    /* 内部の画像群を横スクロールさせるための設定 */
    display: flex;
    overflow-x: auto; /* 横スクロールを可能にする */
    scrollbar-width: thin; /* Firefox用 */
    scrollbar-color: #888 #f0f0f0; /* Firefox用 */
}
    
    /* Webkit系（Chrome, Safari）のスクロールバーのスタイル */
.kurapost-public-list-container .post-image-wrapper::-webkit-scrollbar {
    height: 8px;
}
    
.kurapost-public-list-container .post-image-wrapper::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.kurapost-public-list-container .post-image-wrapper::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

/* post-image内の要素を横に並べる */
.post-image-wrapper .post-image {
    flex-shrink: 0; /* post-imageが縮まないようにする */
    position: relative; /* 子要素のposition:absoluteの基準 */
    margin-right: 8px; /* 画像間の余白 */
    height: 100%; /* 親要素の高さに合わせる */
    display: flex;
    flex-direction: column; /* 内部要素を縦に並べる */
    align-items: center;    /* 内部要素を水平方向の中央に配置 */
}
    
   
.post-image img {
    width: 200px;  /* 縦長・横長に関わらず横幅200pxで表示 */
    height: auto;  /* 縦横比を維持（トリミングしない） */
    display: block; /* 余分な余白を削除 */
    margin-left: 2px;
}

.kurapost-public-list-container .post-image .no-image {
    color: #888;
    font-style: italic;
}

.kurapost-public-list-container .post-content {
    width: 20rem;
    background-color: #fff;
    padding: 2px;
    flex-shrink: 0; /* post-contentの幅が縮まないようにする */
}

.kurapost-public-list-container .post-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3em;
    color: #333;
    border-bottom: none; /* 親要素のh3スタイルを上書き */
}

.kurapost-public-list-container .post-content p {
    margin: 5px 0;
    font-size: 0.95em;
    color: #666;
}

.kurapost-public-list-container .post-date {
    white-space: nowrap;
}

.kurapost-public-list-container .post-detail-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.9em;
    color: #2271b1;
    text-decoration: underline;
}

.kurapost-public-list-container .post-detail-link:hover {
    color: #135e96;
}

.kurapost-public-list-container .pagination {
    margin-top: 20px;
    text-align: center;
}

.kurapost-public-list-container .pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.kurapost-public-list-container .pagination li {
    margin: 0;
}

.kurapost-public-list-container .pagination a,
.kurapost-public-list-container .pagination .current {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #0073aa;
    background-color: #fff;
    border: 1px solid #ddd;
    border-right: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.kurapost-public-list-container .pagination li:last-child a,
.kurapost-public-list-container .pagination li:last-child .current {
    border-right: 1px solid #ddd;
}

.kurapost-public-list-container .pagination a:hover {
    background-color: #e9ecef;
    color: #005177;
}

.kurapost-public-list-container .pagination .current {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
    font-weight: bold;
    cursor: default;
}

.kurapost-public-list-container .pagination .dots {
    padding: 8px 12px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-right: none;
    color: #777;
}

/*
* post-image-mark: post-imageの内部、下部に表示
*/
.kurapost-public-list-container .post-image-mark {
    position: absolute; /* post-imageを基準に配置 */
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
    color: white;
    padding: 4px;
    font-size: 0.8rem;
    text-align: center;
}
    
/* レスポンシブ対応 */
@media (max-width: 768px) {
    .kurapost-form-container,
    .kurapost-public-list-container {
        padding: 15px;
        margin: 10px auto;
    }

    .kurapost-form-container input[type="text"],
    .kurapost-form-container input[type="tel"],
    .kurapost-form-container input[type="email"],
    .kurapost-form-container textarea {
        width: 100%;
    }

    .kurapost-form-container .form-actions {
        text-align: center;
    }

    .kurapost-form-container .button {
        margin: 5px;
        width: calc(50% - 10px); /* ボタンを2列に */
        box-sizing: border-box;
    }

    /* 変更点: レスポンシブ時の縦書き部分の調整 */
    .image-field-wrapper {
        flex-direction: column; /* モバイルでは縦書き部分と入力フィールドを縦に積む */
        align-items: center; /* 中央揃え */
        padding: 10px;
        gap: 10px;
    }

    .image-field-number-vertical {
        writing-mode: horizontal-tb; /* 横書きに戻す */
        text-orientation: mixed;
        border-right: none; /* 右ボーダーを削除 */
        border-bottom: 1px solid #eee; /* 下にボーダーを追加 */
        margin-right: 0;
        padding-bottom: 10px;
        width: 100%; /* 全幅にする */
        text-align: center;
    }

    /* image-upload-sectionがFlexコンテナ */
    .image-upload-section {
        flex-direction: column; /* モバイルでは縦に積む */
        gap: 10px;
    }

    /* image-previewとimage-comment-sectionを横並びにするコンテナ */
    .preview-comment-container {
        flex-direction: column; /* モバイルでは縦に積む */
        gap: 10px;
        align-items: center; /* 中央揃え */
    }

    .kurapost-form-container .image-preview {
        width: 100px; /* モバイルでも固定幅 */
        height: 100px; /* モバイルでも固定高さ */
        max-width: 100px; /* max-widthも固定値に */
        max-height: 100px; /* max-heightも固定値に */
        margin: 0 auto; /* 中央揃え */
    }

    .image-comment-section {
        width: 100%; /* モバイルで全幅 */
        min-width: unset; /* 最小幅をリセット */
    }

    .wp1-kurapost-detail-container .thumbnail-list {
        justify-content: center;
    }

    .wp1-kurapost-detail-container .thumbnail-item {
        width: 60px;
        height: 60px;
    }

    .kurapost-public-list-container .post-grid {
        grid-template-columns: 1fr; /* モバイルでは1列表示 */
    }

    /* スマホ画面では post-content と post-image-wrapper を上下配置にする */
    .kurapost-public-list-container .post-item {
        flex-direction: column;
    }

    .kurapost-public-list-container .post-content {
        width: 100%;
        box-sizing: border-box;
    }

    .search-past-posts-container .search-input-group {
        flex-direction: column; /* モバイルでは縦に積む */
        align-items: stretch; /* 全幅に広げる */
    }

    .search-past-posts-container .search-input-group label {
        text-align: center;
        margin-bottom: 5px;
    }

    .search-past-posts-container .search-input-group input[type="email"],
    .search-past-posts-container .search-input-group button {
        width: 100%; /* 全幅にする */
        margin-left: 0;
        margin-right: 0;
    }
}


/* =========================================
   募集テーマ選択・利用規約・同意チェック（投稿フォーム）
   ========================================= */
#kurapost-bosyu-select-block {
    margin-bottom: 20px;
}

#kurapost-bosyu-selected-block {
    margin-bottom: 20px;
    padding: 16px;
    background: #f6f7f7;
    border-left: 4px solid #2271b1;
}

#kurapost-bosyu-selected-name {
    margin: 0 0 8px;
    font-size: 1.4em;
}

#kurapost-bosyu-selected-desc {
    margin: 0 0 10px;
    color: #444;
}

#kurapost-terms-details {
    margin: 10px 0;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
}

#kurapost-terms-details summary {
    cursor: pointer;
    font-weight: bold;
}

#kurapost-terms-content {
    margin-top: 10px;
    max-height: 260px;
    overflow-y: auto;
    font-size: 0.9em;
    color: #333;
    line-height: 1.6;
}

.kurapost-agreement-row label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: normal;
}

/* =========================================
   投稿フォーム：画像サムネイル管理UI
   ========================================= */
.kurapost-image-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.kurapost-image-thumbs {
    /* 写真は横並び表示（折り返しあり） */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

.kurapost-thumb-item {
    width: 200px; /* 選択中の写真の幅は200px */
    box-sizing: border-box;
}

.kurapost-thumb-image-box {
    /* 写真の背景用div：薄いグレー */
    position: relative;
    width: 200px;
    height: 200px;
    background: #e9e9e9;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
}

.kurapost-thumb-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ×ボタン：写真の右上 */
.kurapost-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    line-height: 1;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}

.kurapost-thumb-remove:hover {
    background: rgba(179, 45, 46, 0.9);
}

/* 並べ替えボタン：写真の左上に[◀][▶]で横並び */
.kurapost-thumb-move {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    flex-direction: row;
    gap: 2px;
    z-index: 2;
}

.kurapost-thumb-move button {
    width: 22px;
    height: 20px;
    line-height: 1;
    font-size: 11px;
    border: none;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
}

.kurapost-thumb-move button:hover {
    background: rgba(34, 113, 177, 0.9);
}

/* テキストボックス：画像と同じ幅 */
.kurapost-thumb-comment {
    width: 200px;
    margin-top: 6px;
    box-sizing: border-box;
    font-size: 0.85em;
}

/* =========================================
   公開画面：投稿一覧の検索ボックス
   ========================================= */
.kurapost-search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

#kurapost-search-input {
    flex: 1;
    max-width: 320px;
    padding: 6px 10px;
}

#kurapost-search-btn {
    padding: 6px 16px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#kurapost-search-btn:hover {
    background: #135e96;
}