/* ==========================================================================
   Comment Form
   ========================================================================== */

.comment-form {
    width: 100%;
    min-width: 0;
}

@media screen and (max-width: 640px) {

    .comment-form {
        width: 100%;

        padding: 9px;

        border: 1px solid #e5e7eb;
        border-radius: 10px;

        background: #ffffff;

        box-shadow:
            0 1px 2px rgba(15, 23, 42, .03),
            0 3px 10px rgba(15, 23, 42, .025);
    }

    .comment-form *,
    .comment-form *::before,
    .comment-form *::after {
        box-sizing: border-box;
    }


    /* space-y 제거 후 직접 간격 제어 */
    .comment-form > :not([hidden]) ~ :not([hidden]) {
        margin-top: 7px !important;
    }


    /* ======================================================================
       Emoticon Picker
       ====================================================================== */

    .comment-form__emoticons {
        width: 100%;
        min-width: 0;
    }

    .comment-form__emoticons .emoticon-picker-btn {
        min-height: 30px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 5px 8px !important;

        border: 1px solid #d1d5db;
        border-radius: 7px;

        background: #ffffff;

        font-size: 7.5px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        color: #475569 !important;

        white-space: nowrap;
    }

    .comment-form__emoticons .emoticon-picker-btn:hover {
        background: #f8fafc;
    }


    /* ======================================================================
       Textarea
       ====================================================================== */

    .comment-form__textarea {
        width: 100% !important;
        min-width: 0;

        min-height: 86px;

        padding: 9px !important;

        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;

        background: #ffffff !important;

        font-size: 10px !important;
        line-height: 1.55 !important;

        color: #111827 !important;

        box-shadow: none !important;

        resize: vertical;
    }

    .comment-form__textarea::placeholder {
        color: #9ca3af;
    }

    .comment-form__textarea:focus {
        border-color: #4f46e5 !important;

        outline: none;

        box-shadow:
            0 0 0 2px rgba(79, 70, 229, .08) !important;
    }


    /* ======================================================================
       Preview
       ====================================================================== */

    .comment-form__preview {
        width: 100%;

        min-height: 40px;

        padding: 8px !important;

        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;

        background: #f8fafc !important;

        overflow-wrap: anywhere;

        font-size: 9px !important;
        line-height: 1.5 !important;

        color: #475569 !important;
    }

    .comment-form__preview.hidden {
        display: none !important;
    }

    .comment-form__preview img {
        width: 28px !important;
        height: 28px !important;

        display: inline-block;

        object-fit: contain;

        vertical-align: middle;

        margin: 0 2px;
    }


    /* ======================================================================
       Error
       ====================================================================== */

    .comment-form__error {
        padding: 6px 8px;

        border: 1px solid #fecaca;
        border-radius: 7px;

        background: #fef2f2;

        font-size: 7.5px !important;
        line-height: 1.4 !important;

        color: #dc2626 !important;
    }


    /* ======================================================================
       Actions
       ====================================================================== */

    .comment-form__actions {
        display: flex !important;

        align-items: center;
        justify-content: flex-end !important;

        gap: 5px !important;

        width: 100%;

        margin-top: 8px !important;
    }

    .comment-form__submit {
        min-height: 33px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        padding: 6px 10px !important;

        border: 1px solid #111827;
        border-radius: 7px !important;

        background: #111827 !important;

        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        color: #ffffff !important;

        white-space: nowrap;
    }

    .comment-form__submit:hover {
        background: #1f2937 !important;
    }


    /* slot 안의 취소 버튼 등도 동일 높이 */
    .comment-form__actions > a,
    .comment-form__actions > button:not(.comment-form__submit) {
        min-height: 33px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        padding: 6px 9px !important;

        border: 1px solid #d1d5db;
        border-radius: 7px;

        background: #ffffff;

        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        color: #475569 !important;

        text-decoration: none !important;

        white-space: nowrap;
    }

}


/* ==========================================================================
   <= 390px
   ========================================================================== */

@media screen and (max-width: 390px) {

    .comment-form {
        padding: 8px;
    }

    .comment-form__textarea {
        min-height: 80px;
    }

}


/* ==========================================================================
   <= 350px
   ========================================================================== */

@media screen and (max-width: 350px) {

    .comment-form__actions {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: 100%;
    }

    .comment-form__actions > * {
        width: 100%;
    }

}