/* ==========================================

   基本

========================================== */



* {

    box-sizing: border-box;

}





html,

body {

    margin: 0;

    padding: 0;



    min-height: 100%;

}





html {

    height: 100%;

}





body {

    min-height: 100vh;



    font-family:

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        "Noto Sans JP",

        sans-serif;



    background: #f4f6f8;

    color: #222;



    -webkit-tap-highlight-color: transparent;

}





/* ==========================================

   ページ全体

   footerを画面下部へ固定するための構造

========================================== */



.page-wrapper {

    min-height: 100vh;



    display: flex;

    flex-direction: column;

}





/* ==========================================

   ヘッダー

========================================== */



header {

    flex: 0 0 auto;



    background: #1f2937;



    text-align: center;



    padding: 0;



    line-height: 0;



    box-shadow:

        0 2px 8px rgba(0, 0, 0, 0.12);

}





/* ==========================================

   メイン

   コンテンツ量に応じて伸縮し、

   フッターを画面下部へ押し下げる

========================================== */



main {

    flex: 1 1 auto;



    width: calc(100% - 24px);

    max-width: 760px;



    margin:

        24px

        auto

        12px;

}





/* ==========================================

   エラー

========================================== */



.error {

    background: #fee2e2;

    color: #991b1b;



    padding:

        13px

        15px;



    margin-bottom: 18px;



    border-radius: 10px;



    font-size: 14px;



    border:

        1px

        solid

        #fecaca;

}





/* ==========================================

   スレッド一覧

========================================== */



.thread-list {

    display: flex;

    flex-direction: column;



    gap: 10px;

}





.thread-row {

    display: grid;



    grid-template-columns:

        minmax(0, 1fr)

        110px;



    gap: 10px;

}





/* ==========================================

   スレッドタイトル

========================================== */



.thread-title {

    min-height: 58px;



    display: flex;

    align-items: center;



    padding:

        14px

        16px;



    background: white;



    border-radius: 10px;



    color: #2563eb;



    font-size: 16px;

    font-weight: 700;



    cursor: pointer;



    box-shadow:

        0 2px 8px rgba(0, 0, 0, 0.07);



    transition:

        background 0.15s,

        transform 0.1s;

}





.thread-title:hover {

    background: #eff6ff;

}





.thread-title:active {

    transform: scale(0.99);

}





.thread-title-text {

    min-width: 0;



    overflow-wrap: anywhere;

}





/* ==========================================

   集約ボタン

========================================== */



.summary-link {

    text-decoration: none;

}





.summary-button {

    width: 100%;

    height: 58px;



    border: none;

    border-radius: 10px;



    background: #059669;

    color: white;



    font-size: 14px;

    font-weight: 700;



    cursor: pointer;



    box-shadow:

        0 2px 8px rgba(0, 0, 0, 0.08);

}





.summary-button:hover {

    background: #047857;

}





.summary-button:active {

    transform: scale(0.98);

}





/* ==========================================

   スレッド作成セル

========================================== */



.create-thread-cell {

    min-height: 58px;



    display: flex;

    align-items: center;

    justify-content: center;



    padding:

        14px

        16px;



    background: #e5e7eb;



    border-radius: 10px;



    color: #374151;



    font-size: 15px;

    font-weight: 700;



    cursor: pointer;



    border:

        2px

        dashed

        #9ca3af;



    transition:

        background 0.15s,

        border-color 0.15s,

        transform 0.1s;

}





.create-thread-cell:hover {

    background: #dbeafe;



    border-color: #60a5fa;

}





.create-thread-cell:active {

    transform: scale(0.99);

}





/* ==========================================

   フッター

   常にページ最下部へ配置

========================================== */



footer {

    flex: 0 0 auto;



    width: 100%;



    background: #1f2937;



    color: white;



    padding:

        14px

        12px

        18px;



    margin-top: auto;

}





.footer-inner {

    width: 100%;

    max-width: 760px;



    margin: 0 auto;



    text-align: center;

}





.footer-title {

    font-size: 15px;

    font-weight: 700;



    margin-bottom: 10px;

}





/* ==========================================

   削除フォーム

   PC・スマホとも横並び

========================================== */



.delete-form {

    display: flex;

    align-items: stretch;



    gap: 8px;



    width: 100%;

}





.delete-key-input {

    flex: 1 1 auto;



    min-width: 0;

    width: 0;



    height: 48px;



    padding:

        10px

        8px;



    border:

        1px

        solid

        #9ca3af;



    border-radius: 8px;



    font-size: 18px;



    text-align: center;



    letter-spacing: 4px;



    text-transform: uppercase;



    outline: none;

}





.delete-key-input:focus {

    border-color: #60a5fa;



    box-shadow:

        0 0 0 3px

        rgba(96, 165, 250, 0.25);

}





.delete-button {

    flex:

        0

        0

        150px;



    height: 48px;



    border: none;

    border-radius: 8px;



    background: #dc2626;

    color: white;



    font-size: 14px;

    font-weight: 700;



    cursor: pointer;



    white-space: nowrap;

}





.delete-button:hover {

    background: #b91c1c;

}





/* ==========================================

   モーダル

========================================== */



.modal {

    display: none;



    position: fixed;



    z-index: 1000;



    left: 0;

    top: 0;



    width: 100%;

    height: 100%;



    padding: 15px;



    background:

        rgba(0, 0, 0, 0.58);



    align-items: center;

    justify-content: center;

}





.modal-content {

    width: 100%;

    max-width: 500px;



    max-height: 90vh;



    overflow-y: auto;



    background: white;



    padding: 22px;



    border-radius: 14px;



    box-shadow:

        0 15px 40px

        rgba(0, 0, 0, 0.3);



    animation:

        modalOpen

        0.15s

        ease-out;

}





@keyframes modalOpen {



    from {

        opacity: 0;



        transform:

            translateY(10px)

            scale(0.98);

    }



    to {

        opacity: 1;



        transform:

            translateY(0)

            scale(1);

    }



}





.modal-content h2 {

    margin:

        0

        0

        18px;



    font-size: 20px;



    line-height: 1.4;

}





.modal-content label {

    display: block;



    margin-bottom: 7px;



    font-size: 14px;

    font-weight: 700;



    color: #374151;

}





.modal-content input[type="text"],

.modal-content input[type="number"] {

    width: 100%;



    height: 48px;



    padding:

        12px

        13px;



    border:

        1px

        solid

        #bbb;



    border-radius: 8px;



    font-size: 16px;



    outline: none;

}





.modal-content input:focus,

.modal-content textarea:focus,

.modal-content select:focus {

    border-color: #2563eb;



    box-shadow:

        0 0 0 3px

        rgba(37, 99, 235, 0.15);

}





.modal-content textarea {

    width: 100%;



    min-height: 130px;



    resize: vertical;



    padding:

        12px

        13px;



    border:

        1px

        solid

        #bbb;



    border-radius: 8px;



    font-size: 16px;



    font-family: inherit;



    outline: none;

}





.input-help {

    margin-top: 6px;



    font-size: 12px;



    color: #6b7280;

}





/* ==========================================

   モーダルボタン

========================================== */



.modal-buttons {

    display: flex;



    gap: 8px;



    margin-top: 18px;

}





.modal-buttons button {

    flex: 1;



    min-height: 48px;



    border: none;

    border-radius: 8px;



    font-size: 15px;

    font-weight: 700;



    cursor: pointer;

}





.submit-button {

    background: #2563eb;

    color: white;

}





.submit-button:hover {

    background: #1d4ed8;

}





.close-button {

    background: #6b7280;

    color: white;

}





.close-button:hover {

    background: #4b5563;

}





/* ==========================================

   スレッドキー + 検索オプション

========================================== */



.thread-key-option-row {

    display: grid;



    grid-template-columns:

        minmax(0, 1fr)

        minmax(0, 1fr);



    gap: 10px;



    margin-top: 18px;



    align-items: start;

}





.thread-key-field,

.thread-option-field {

    min-width: 0;

}





.thread-option-field {

    margin-top: 0;

}





.thread-option-select,

.search-option-select {

    width: 100%;



    height: 48px;



    padding:

        10px

        13px;



    border:

        1px

        solid

        #bbb;



    border-radius: 8px;



    background: white;



    color: #222;



    font-size: 16px;



    font-family: inherit;



    outline: none;



    cursor: pointer;

}





.thread-option-select:focus,

.search-option-select:focus {

    border-color: #2563eb;



    box-shadow:

        0 0 0 3px

        rgba(37, 99, 235, 0.15);

}





/* ==========================================

   削除キー表示

========================================== */



.delete-key-display {

    margin-top: 10px;



    padding: 15px;



    background: #eff6ff;



    border:

        1px

        solid

        #bfdbfe;



    border-radius: 9px;



    text-align: center;

}





.delete-key-value {

    display: block;



    margin:

        10px

        0

        14px;



    font-size: 30px;



    font-weight: 800;



    letter-spacing: 7px;



    color: #1d4ed8;



    font-family:

        "Courier New",

        monospace;

}





.message-text {

    margin: 0;



    line-height: 1.7;



    font-size: 14px;

}





/* ==========================================

   検索

========================================== */



.search-thread-button {

    width: 100%;

    min-height: 58px;



    border: none;

    border-radius: 10px;



    background: #2563eb;

    color: white;



    font-size: 14px;

    font-weight: 700;



    cursor: pointer;



    box-shadow:

        0 2px 8px

        rgba(0, 0, 0, 0.08);



    transition:

        background 0.15s,

        transform 0.1s;

}





.search-thread-button:hover {

    background: #1d4ed8;

}





.search-thread-button:active {

    transform: scale(0.98);

}





.search-field {

    margin-bottom: 16px;

}





.search-field-label {

    display: block;



    margin-bottom: 7px;



    font-size: 14px;



    font-weight: 700;



    color: #374151;

}





.search-field-help {

    margin-top: 6px;



    font-size: 12px;



    color: #6b7280;

}





.search-clear-button {

    width: 100%;



    margin-top: 10px;



    padding: 11px;



    border:

        1px

        solid

        #d1d5db;



    border-radius: 8px;



    background: #f9fafb;



    color: #4b5563;



    font-size: 13px;

    font-weight: 700;



    cursor: pointer;



    transition:

        background 0.15s,

        border-color 0.15s;

}





.search-clear-button:hover {

    background: #f3f4f6;



    border-color: #9ca3af;

}





/* ==========================================

   スレッド一覧 AJAX

========================================== */



#threadContainer {

    display: flex;

    flex-direction: column;



    gap: 10px;



    transition: opacity 0.15s;

}





#threadContainer.loading {

    opacity: 0.45;



    pointer-events: none;

}





/* ==========================================

   スレッド0件

========================================== */



.no-threads {

    min-height: 100px;



    display: flex;

    align-items: center;

    justify-content: center;



    padding: 20px;



    background: white;



    border-radius: 10px;



    color: #6b7280;



    font-size: 14px;



    text-align: center;



    box-shadow:

        0 2px 8px

        rgba(0, 0, 0, 0.07);

}





/* ==========================================

   ページネーション

   余白を最小限に調整

========================================== */



#paginationContainer {

    margin-top: 8px;

}





.pagination {

    display: flex;



    align-items: center;

    justify-content: center;



    gap: 6px;



    flex-wrap: wrap;

}





.pagination-pages {

    display: flex;



    align-items: center;



    gap: 5px;

}





.pagination-button,

.pagination-page {

    min-width: 42px;

    min-height: 40px;



    padding:

        7px

        10px;



    border:

        1px

        solid

        #d1d5db;



    border-radius: 8px;



    background: white;

    color: #374151;



    font-size: 14px;

    font-weight: 700;



    cursor: pointer;



    transition:

        background 0.15s,

        border-color 0.15s,

        color 0.15s,

        transform 0.1s;

}





.pagination-button:hover,

.pagination-page:hover {

    background: #eff6ff;



    border-color: #60a5fa;



    color: #1d4ed8;

}





.pagination-button:active,

.pagination-page:active {

    transform: scale(0.96);

}





.pagination-page.active {

    background: #2563eb;



    border-color: #2563eb;



    color: white;



    cursor: default;

}





.pagination-page.active:hover {

    background: #2563eb;



    border-color: #2563eb;



    color: white;

}





.pagination-dots {

    min-width: 25px;



    text-align: center;



    color: #6b7280;



    font-weight: 700;

}





/* ==========================================

   スレッド件数

========================================== */



.thread-count {

    margin-top: 4px;



    text-align: center;



    color: #6b7280;



    font-size: 12px;

}





/* ==========================================

   スマホ

========================================== */



@media (max-width: 600px) {



    /* --------------------------------------

       モーダル

    -------------------------------------- */



    .modal {

        align-items: flex-start;



        padding-top: 8vh;

        padding-bottom: 20px;

    }





    .modal-content {

        max-height: 82vh;



        padding: 18px;



        border-radius: 12px;

    }





    .modal-content h2 {

        font-size: 18px;

    }





    /* --------------------------------------

       ヘッダー

    -------------------------------------- */




    /* --------------------------------------

       メイン

       下余白を小さくしてフッターとの距離を短縮

    -------------------------------------- */



    main {

        width: calc(100% - 16px);



        margin-top: 16px;



        margin-bottom: 4px;

    }





    /* --------------------------------------

       スレッド

    -------------------------------------- */



    .thread-row {

        grid-template-columns:

            minmax(0, 1fr)

            92px;



        gap: 7px;

    }





    .thread-title,

    .summary-button,

    .create-thread-cell {

        min-height: 56px;

    }





    .thread-title {

        padding: 12px;



        font-size: 15px;

    }





    .summary-button {

        font-size: 13px;

    }





    .create-thread-cell {

        padding: 12px;



        font-size: 14px;

    }





    .search-thread-button {

        min-height: 56px;



        font-size: 13px;

    }





    /* --------------------------------------

       スレッドキー + 検索オプション

       スマホでも横並び

    -------------------------------------- */



    .thread-key-option-row {

        grid-template-columns:

            minmax(0, 1fr)

            minmax(0, 1fr);



        gap: 8px;



        margin-top: 16px;

    }





    .thread-option-select,

    .search-option-select {

        min-height: 48px;



        height: 48px;



        font-size: 16px;



        padding:

            10px

            9px;

    }





    /* --------------------------------------

       モーダルボタン

    -------------------------------------- */



    .modal-buttons {

        flex-direction: column;

    }





    .modal-buttons button {

        flex: none;



        min-height: 50px;

    }





    /* --------------------------------------

       フッター

       スマホでも削除キーとボタンを横並び

    -------------------------------------- */



    footer {

        padding:

            12px

            8px

            14px;



        margin-top: auto;

    }





    .footer-title {

        font-size: 14px;



        margin-bottom: 7px;

    }





    .delete-form {

        flex-direction: row;



        align-items: stretch;



        gap: 6px;



        /* 操作ボタンに隠れにくくするための下余白 */

        margin-bottom: 78px;

    }





    .delete-key-input {

        flex:

            1

            1

            0;



        width: 0;



        min-width: 0;



        height: 46px;



        padding:

            8px

            5px;



        font-size: 18px;



        letter-spacing: 3px;

    }





    .delete-button {

        flex:

            0

            0

            125px;



        width: 125px;



        min-height: 46px;

        height: 46px;



        padding:

            5px

            7px;



        font-size: 12px;



        white-space: nowrap;

    }





    /* --------------------------------------

       ページネーション

       「全XXスレッド」とフッターの距離を短縮

    -------------------------------------- */



    #paginationContainer {

        margin-top: 6px;

    }





    .pagination {

        gap: 4px;

    }





    .pagination-button,

    .pagination-page {

        min-width: 38px;

        min-height: 38px;



        padding:

            6px

            8px;



        font-size: 13px;

    }





    .pagination-pages {

        gap: 3px;

    }





    .pagination-dots {

        min-width: 18px;

    }





    .thread-count {

        margin-top: 3px;

    }



}

/* ==========================================

   summary.php 専用

========================================== */





/* ==========================================

   ページ最上部ローディングバー

========================================== */



#summaryLoadingBar {



    position: fixed;



    top: 0;

    left: 0;



    width: 100%;



    height: 4px;



    background:

        linear-gradient(

            90deg,

            #2563eb,

            #06b6d4,

            #2563eb

        );



    background-size:

        200% 100%;



    animation:

        summaryLoadingBarAnimation

        1.2s

        linear

        infinite;



    z-index: 99999;



    display: none;

}





@keyframes summaryLoadingBarAnimation {



    0% {

        background-position:

            200% 0;

    }



    100% {

        background-position:

            -200% 0;

    }



}





/* ==========================================

   summary.php ヘッダー

========================================== */



header {

    position: relative;

}





/* ==========================================

   ヘッダー右側の戻るボタン

   ヘッダーと同じ背景色・文字色

========================================== */



.summary-header-back {



    position: absolute;



    top: 50%;



    right: 12px;



    transform:

        translateY(-50%);



    display: flex;



    align-items: center;



    justify-content: center;



    min-width: 76px;



    height: 36px;



    box-sizing: border-box;



    padding:

        0

        10px;



    border:

        1px

        solid

        #ffffff;



    border-radius: 7px;



    /*

     * ヘッダーと同じ色

     */

    background:

        #1f2937;



    /*

     * ヘッダー文字と同じ色

     */

    color:

        #ffffff;



    font-size: 14px;



    font-weight: 700;



    text-decoration: none;



    transition:

        opacity 0.15s,

        transform 0.1s;

}





.summary-header-back:hover {



    opacity: 0.88;

}





.summary-header-back:active {



    transform:

        translateY(-50%)

        scale(0.97);

}





/* ==========================================

   集約中オーバーレイ

========================================== */



.summary-loading-overlay {



    position: absolute;



    top: 0;

    left: 0;



    width: 100%;

    height: 100%;



    display: none;



    align-items: center;

    justify-content: center;



    background:

        rgba(

            255,

            255,

            255,

            0.88

        );



    border-radius: 8px;



    z-index: 10;

}





.summary-loading-content {



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    gap: 12px;



    color:

        #374151;



    font-size: 14px;



    font-weight: 600;

}





/* ==========================================

   ローディングスピナー

========================================== */



.summary-loading-spinner {



    width: 42px;



    height: 42px;



    border:

        4px

        solid

        #dbeafe;



    border-top-color:

        #2563eb;



    border-radius: 50%;



    animation:

        summarySpinner

        0.8s

        linear

        infinite;

}





@keyframes summarySpinner {



    to {

        transform:

            rotate(360deg);

    }



}





/* ==========================================

   スレッドタイトル

========================================== */



.summary-header {



    display: flex;



    align-items: center;



    gap: 12px;



    margin:

        0

        0

        18px;

}





.summary-title {



    margin: 0;



    font-size: 22px;



    line-height: 1.4;



    overflow-wrap: anywhere;



    flex: 1;

}





/* ==========================================

   thread_key

========================================== */



.thread-key-input {



    width: 100px;



    height: 38px;



    box-sizing: border-box;



    padding:

        6px

        9px;



    border:

        1px

        solid

        #d1d5db;



    border-radius: 7px;



    background:

        #fff;



    color:

        #222;



    font-size: 14px;



    text-align: center;



    outline: none;

}





.thread-key-input:focus {



    border-color:

        #2563eb;



    box-shadow:

        0 0 0 3px

        rgba(

            37,

            99,

            235,

            0.15

        );

}





/* ==========================================

   集約カード

========================================== */



.summary-card {



    background:

        white;



    border-radius:

        10px;



    padding:

        18px;



    box-shadow:

        0 2px 8px

        rgba(

            0,

            0,

            0,

            0.07

        );

}





/* ==========================================

   テキストエリアエリア

========================================== */



.summary-textarea-wrapper {



    position: relative;



    width: 100%;

}





/* ==========================================

   集約結果テキストエリア

   「意見の集約結果」見出しは使用しない

========================================== */



.summary-textarea {



    display: block;



    width: 100%;



    /*

     * 見出しを削除し、

     * 削除ボタンを横並びにした分、

     * テキストエリアを広く使用する。

     */



    min-height: 520px;



    box-sizing: border-box;



    resize: vertical;



    padding:

        14px;



    border:

        1px

        solid

        #d1d5db;



    border-radius:

        8px;



    background:

        #f9fafb;



    color:

        #222;



    font-family:

        inherit;



    font-size:

        15px;



    line-height:

        1.7;



    outline:

        none;

}





.summary-textarea:focus {



    border-color:

        #2563eb;



    box-shadow:

        0 0 0 3px

        rgba(

            37,

            99,

            235,

            0.15

        );

}





/* ==========================================

   意見数

========================================== */



.opinion-count {



    margin:

        0

        0

        14px;



    color:

        #6b7280;



    font-size:

        13px;



    text-align:

        right;

}





/* ==========================================

   ボタンエリア

========================================== */



.summary-buttons {



    display: flex;



    flex-direction: column;



    gap: 10px;



    margin-top: 16px;

}





/* ==========================================

   集約フォーム

========================================== */



#summarizeForm {



    width: 100%;

}





/* ==========================================

   削除ボタンエリア

   2つのボタンを横並び

========================================== */



.delete-buttons {



    display: grid;



    grid-template-columns:

        1fr

        1fr;



    gap: 10px;



    width: 100%;



    margin-top: 16px;

}





.delete-buttons form {



    width: 100%;

}





/* ==========================================

   共通ボタン

========================================== */



.summary-action-button {



    width: 100%;



    min-height: 52px;



    border: none;



    border-radius: 9px;



    color:

        white;



    font-size:

        15px;



    font-weight:

        700;



    cursor:

        pointer;



    transition:

        background 0.15s,

        transform 0.1s,

        opacity 0.15s;

}





.summary-action-button:active {



    transform:

        scale(0.98);

}





.summary-action-button:disabled {



    opacity:

        0.65;



    cursor:

        wait;



    transform:

        none;

}





/* ==========================================

   集約ボタン

========================================== */



.summarize-button {



    background:

        #059669;

}





.summarize-button:hover {



    background:

        #047857;

}





/* ==========================================

   意見削除

========================================== */



.delete-opinions-button {



    background:

        #d97706;

}





.delete-opinions-button:hover {



    background:

        #b45309;

}





/* ==========================================

   スレッド削除

========================================== */



.delete-thread-button {



    background:

        #dc2626;

}





.delete-thread-button:hover {



    background:

        #b91c1c;

}





/* ==========================================

   summary.php スマートフォン

========================================== */



@media (max-width: 600px) {



    .summary-header {



        align-items:

            flex-start;



        gap:

            8px;

    }





    .summary-title {



        font-size:

            20px;



        padding-right:

            0;

    }





    .summary-header-back {



        min-width:

            68px;



        height:

            34px;



        right:

            8px;



        font-size:

            13px;

    }





    .thread-key-input {



        width:

            90px;



        height:

            36px;



        font-size:

            13px;

    }





    .summary-card {



        padding:

            14px;

    }





    .summary-textarea {



        min-height:

            460px;



        font-size:

            15px;

    }





    .summary-action-button {



        min-height:

            50px;



        font-size:

            14px;

    }





    /*

     * スマートフォンでも

     * 削除ボタンは横並びを維持

     */



    .delete-buttons {



        grid-template-columns:

            1fr

            1fr;



        gap:

            8px;

    }





    .delete-buttons

    .summary-action-button {



        min-height:

            50px;



        padding:

            6px

            4px;



        font-size:

            13px;

    }



}