@charset "UTF-8";

/* =============================== */
/* pac-contact KBoard Skin         */
/* contact.css 디자인 동일          */
/* =============================== */

#pac-contact-editor,
#pac-contact-document {
    width: 100%;
}

#pac-contact-editor form {
    margin: 0;
    padding: 0;
}

/* =============================== */
/* Form Layout                     */
/* =============================== */
#pac-contact-editor .ct-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(35, 35, 35, 0.5);
}

#pac-contact-editor .ct-row {
    display: flex;
    border-bottom: 1px solid rgba(35, 35, 35, 0.5);
}

#pac-contact-editor .ct-row.full .ct-group {
    width: 100%;
}

#pac-contact-editor .ct-row.half .ct-group {
    flex: 1;
}

#pac-contact-editor .ct-row.half .ct-group:first-child {
    border-right: 1px solid rgba(35, 35, 35, 0.5);
}

/* =============================== */
/* Form Group                      */
/* =============================== */
#pac-contact-editor .ct-group {
    display: flex;
    align-items: stretch;
}

#pac-contact-editor .ct-group > label {
    width: 160px;
    flex-shrink: 0;
    padding: 28px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #232323;
    border-right: 1px solid rgba(35, 35, 35, 0.5);
    display: flex;
    align-items: center;
    background: rgba(35, 35, 35, 0.03);
    margin: 0;
}

#pac-contact-editor .ct-group > label .required {
    color: #c9a96e;
    margin-left: 3px;
}

#pac-contact-editor .ct-group .ct-input,
#pac-contact-editor .ct-group .ct-select,
#pac-contact-editor .ct-group .ct-textarea {
    flex: 1;
}

/* =============================== */
/* Input Fields                    */
/* =============================== */
#pac-contact-editor .ct-input,
#pac-contact-editor .ct-select,
#pac-contact-editor textarea {
    width: 100%;
    padding: 28px 24px;
    background: #fff;
    border: none;
    box-shadow: none;
    font-family: 'Pretendard', sans-serif;
    font-size: 15px;
    color: #232323;
    outline: none;
    transition: background 0.2s;
    border-radius: 0;
    box-sizing: border-box;
}

#pac-contact-editor .ct-input::placeholder,
#pac-contact-editor .ct-textarea::placeholder {
    color: rgba(35, 35, 35, 0.35);
}

#pac-contact-editor .ct-input:focus,
#pac-contact-editor .ct-select:focus,
#pac-contact-editor .ct-textarea:focus {
    background: rgba(35, 35, 35, 0.03);
    border: none;
    box-shadow: none;
    outline: none;
}

/* Select */
#pac-contact-editor .ct-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23232323' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    background-size: 12px 8px;
    padding-right: 52px;
    height: auto;
    line-height: normal;
    min-height: 0;
    color: #232323;
    border: none;
}

#pac-contact-editor .ct-select option {
    background: #fff;
    color: #232323;
}

/* Textarea */
#pac-contact-editor .ct-textarea {
    resize: vertical;
    min-height: 200px;
    line-height: 1.7;
    display: block;
    vertical-align: top;
}

/* =============================== */
/* Privacy Group                   */
/* =============================== */
#pac-contact-editor .ct-group.privacy-group {
    flex-direction: column;
    align-items: stretch;
}

#pac-contact-editor .ct-group.privacy-group > label {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(35, 35, 35, 0.5);
    padding: 20px 24px;
}

#pac-contact-editor .ct-privacy {
    padding: 28px 24px;
}

#pac-contact-editor .ct-privacy-content {
    padding: 20px 24px;
    background: rgba(35, 35, 35, 0.03);
    border: 1px solid rgba(35, 35, 35, 0.5);
    border-radius: 4px;
    margin-bottom: 20px;
    max-height: 180px;
    overflow-y: auto;
}

#pac-contact-editor .ct-privacy-content p {
    font-size: 14px;
    color: rgba(35, 35, 35, 0.7);
    line-height: 1.7;
    margin-bottom: 12px;
}

#pac-contact-editor .ct-privacy-content p:last-child {
    margin-bottom: 0;
}

#pac-contact-editor .ct-privacy-content ul {
    margin: 12px 0 0;
    padding-left: 18px;
}

#pac-contact-editor .ct-privacy-content ul li {
    font-size: 13px;
    color: rgba(35, 35, 35, 0.6);
    line-height: 1.8;
    list-style: disc;
}

#pac-contact-editor .ct-privacy-content::-webkit-scrollbar {
    width: 4px;
}

#pac-contact-editor .ct-privacy-content::-webkit-scrollbar-track {
    background: rgba(35, 35, 35, 0.05);
}

#pac-contact-editor .ct-privacy-content::-webkit-scrollbar-thumb {
    background: rgba(35, 35, 35, 0.2);
    border-radius: 2px;
}

/* =============================== */
/* Checkbox                        */
/* =============================== */
#pac-contact-editor .ct-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

#pac-contact-editor .ct-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 1.5px solid rgba(35, 35, 35, 0.5);
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s;
    box-shadow: none;
}

#pac-contact-editor .ct-checkbox input[type="checkbox"]:checked {
    background: #232323;
    border-color: #232323;
}

#pac-contact-editor .ct-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4 7L10 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#pac-contact-editor .ct-checkbox label {
    font-size: 14px;
    color: #232323;
    cursor: pointer;
    font-weight: normal;
    width: auto;
    border: none;
    background: none;
    padding: 0;
    display: inline;
    align-items: unset;
}

/* =============================== */
/* Submit Button                   */
/* =============================== */
#pac-contact-editor .ct-submit-row {
    border-bottom: none;
    padding: 48px 0 0;
    display: block;
}

#pac-contact-editor .btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 56px;
    background: #232323;
    border: 1px solid #232323;
    border-radius: 4px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s;
    letter-spacing: 0.02em;
}

#pac-contact-editor .btn-submit:hover {
    background: #fff;
    color: #232323;
}

#pac-contact-editor .btn-submit:active {
    transform: scale(0.98);
}

#pac-contact-editor .btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =============================== */
/* Complete (document.php)         */
/* =============================== */
#pac-contact-document .ct-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    text-align: center;
}

#pac-contact-document .ct-complete-icon {
    margin-bottom: 28px;
}

#pac-contact-document .ct-complete-title {
    font-size: 28px;
    font-weight: 600;
    color: #1f1f1f;
    margin-bottom: 16px;
}

#pac-contact-document .ct-complete-desc {
    font-size: 17px;
    color: rgba(35, 35, 35, 0.6);
    line-height: 1.7;
}

/* =============================== */
/* Responsive                      */
/* =============================== */
@media (max-width: 1024px) {
    #pac-contact-editor .ct-row.half {
        flex-direction: column;
    }

    #pac-contact-editor .ct-row.half .ct-group:first-child {
        border-right: none;
        border-bottom: 1px solid rgba(35, 35, 35, 0.5);
    }

    #pac-contact-editor .ct-group > label {
        width: 130px;
        font-size: 14px;
        padding: 22px 18px;
    }

    #pac-contact-editor .ct-input,
    #pac-contact-editor .ct-select,
    #pac-contact-editor .ct-textarea {
        padding: 22px 18px;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    #pac-contact-editor .ct-group {
        flex-direction: column;
    }

    #pac-contact-editor .ct-group > label {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(35, 35, 35, 0.5);
        padding: 14px 18px;
        font-size: 13px;
    }

    #pac-contact-editor .ct-row.half .ct-group:first-child {
        border-right: none;
    }

    #pac-contact-editor .ct-input,
    #pac-contact-editor .ct-select,
    #pac-contact-editor .ct-textarea {
        padding: 18px;
        font-size: 14px;
    }

    #pac-contact-editor .ct-select {
        background-position: right 18px center;
        padding-right: 44px;
    }

    #pac-contact-editor .ct-textarea {
        min-height: 160px;
    }

    #pac-contact-editor .ct-privacy {
        padding: 20px 18px;
    }

    #pac-contact-editor .ct-privacy-content {
        padding: 16px 18px;
    }

    #pac-contact-editor .ct-submit-row {
        padding: 36px 0 0;
    }

    #pac-contact-editor .btn-submit {
        width: 100%;
        height: 52px;
        font-size: 15px;
    }
}

/* =============================== */
/* Admin List (관리자 목록 스타일)   */
/* =============================== */
a.kboard-contact-form-button-small,
input.kboard-contact-form-button-small,
button.kboard-contact-form-button-small { position: relative; display: inline-block; *display: inline; zoom: 1; margin: 0; padding: 0 10px; width: auto; height: 28px; line-height: 28px; font-size: 14px; font-weight: normal; letter-spacing: normal; color: #545861 !important; background: #eaeaea !important; border: none; border-radius: 0; text-decoration: none !important; cursor: pointer; vertical-align: middle; text-shadow: none; box-shadow: none; transition-duration: 0.3s; box-sizing: content-box; }
a.kboard-contact-form-button-small:hover,
input.kboard-contact-form-button-small:hover,
button.kboard-contact-form-button-small:hover { opacity: 0.7; }

.kboard-contact-form-new-notify { display: inline-block; padding: 2px; line-height: 10px; font-size: 10px; color: white; background-color: #f61b5d; font-weight: normal; }
.kboard-contact-form-cut-strings { width: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-wrap: normal; }

#kboard-contact-form-list { display: inline-block; *display: inline; zoom: 1; margin: 0; width: 100%; }
#kboard-contact-form-list form { margin: 0; padding: 0; }
#kboard-contact-form-list .kboard-list-header { float: left; display: table; padding-bottom: 15px; width: 100%; }
#kboard-contact-form-list .kboard-list-header .kboard-total-count { *float: left; display: table-cell; font-size: 14px; }
#kboard-contact-form-list .kboard-list-header .kboard-sort { *float: right; display: table-cell; text-align: right; }
#kboard-contact-form-list .kboard-list-header .kboard-sort select { display: inline; margin: 0; padding: 0; width: auto; min-width: 0; max-width: none; height: 26px; min-height: 0; line-height: 26px; font-size: 13px; color: #666666; border-radius: 0; border: 1px solid #f1f1f1; background: white; vertical-align: middle; box-shadow: none; box-sizing: content-box; -webkit-appearance: menulist; appearance: menulist; }
#kboard-contact-form-list .kboard-category { float: left; padding-bottom: 15px; width: 100%; }
#kboard-contact-form-list .kboard-category.category-mobile { display: none; }
#kboard-contact-form-list .kboard-category.category-pc { display: block; }
#kboard-contact-form-list .kboard-category .kboard-category-list { margin: 0 0 5px 0; padding: 0; list-style: none; border: 0; background-color: #f9f9f9; overflow: hidden; }
#kboard-contact-form-list .kboard-category .kboard-category-list li { display: inline-block; margin: 0; padding: 0 5px; border: 0; list-style: none; }
#kboard-contact-form-list .kboard-category .kboard-category-list li a { display: block; padding: 10px 10px 8px; font-size: 14px; border: 0; border-bottom: 2px solid transparent; text-decoration: none; color: #515151; }
#kboard-contact-form-list .kboard-category .kboard-category-list li.kboard-category-selected a { font-weight: bold; border-bottom: 2px solid #545861; color: #545861; }
#kboard-contact-form-list .kboard-list { float: left; width: 100%; background-color: white; }
#kboard-contact-form-list .kboard-list table { display: table; table-layout: fixed; margin: 0; padding: 0; width: 100%; border: 0; font-size: 14px; border-collapse: collapse; }
#kboard-contact-form-list .kboard-list table a { color: black; font-weight: normal; text-decoration: none; border: 0; box-shadow: none; font-size: 14px; }
#kboard-contact-form-list .kboard-list table tr { border: 0; background-color: transparent; transition-duration: 0.3s; }
#kboard-contact-form-list .kboard-list table td { padding: 10px 0; height: auto; text-align: center; vertical-align: middle; font-size: 14px; }
#kboard-contact-form-list .kboard-list table td.kboard-list-uid { width: 72px; }
#kboard-contact-form-list .kboard-list table td.kboard-list-title { width: auto; }
#kboard-contact-form-list .kboard-list table td.kboard-list-user { width: 100px; }
#kboard-contact-form-list .kboard-list table td.kboard-list-date { width: 75px; }
#kboard-contact-form-list .kboard-list table td.kboard-list-vote { width: 55px; }
#kboard-contact-form-list .kboard-list table td.kboard-list-view { width: 55px; }
#kboard-contact-form-list .kboard-list thead { background-color: transparent; }
#kboard-contact-form-list .kboard-list thead tr td { font-weight: bold; color: #545861; border: 0; border-bottom: 2px solid #f1f1f1; }
#kboard-contact-form-list .kboard-list tbody tr td { word-break: break-all; border: 0; border-bottom: 1px solid #f1f1f1; }
#kboard-contact-form-list .kboard-list tbody tr:hover { background-color: #f7f7f7; }
#kboard-contact-form-list .kboard-list tbody tr.kboard-list-notice { background-color: #f4f4f4; }
#kboard-contact-form-list .kboard-list tbody td.kboard-list-title { text-align: left; }
#kboard-contact-form-list .kboard-list tbody td.kboard-list-title img { display: inline; margin: 0; width: auto; height: auto; vertical-align: middle; max-width: 100%; }
#kboard-contact-form-list .kboard-list tbody td.kboard-list-title .kboard-comments-count { color: #00a8e7; }
#kboard-contact-form-list .kboard-pagination { float: left; padding: 15px 0; width: 100%; }
#kboard-contact-form-list .kboard-pagination .kboard-pagination-pages { float: left; margin: 0; padding: 0; width: 100%; list-style: none; text-align: center; border: 0; }
#kboard-contact-form-list .kboard-pagination .kboard-pagination-pages li { display: inline-block; margin: 0; padding: 0 1px; background: none; border: 0; list-style: none; }
#kboard-contact-form-list .kboard-pagination .kboard-pagination-pages li a { display: block; margin: 0; padding: 0 11px; height: 28px; line-height: 28px; font-size: 14px; color: #999999; text-decoration: none; border: 0; background-color: #f9f9f9; box-shadow: none; }
#kboard-contact-form-list .kboard-pagination .kboard-pagination-pages li:hover a,
#kboard-contact-form-list .kboard-pagination .kboard-pagination-pages li.active a { border: 0; color: #545861; background-color: #eaeaea; }
#kboard-contact-form-list .kboard-search { float: left; padding-bottom: 15px; width: 100%; text-align: center; }
#kboard-contact-form-list .kboard-search select { display: inline; margin: 0; padding: 0 5px; width: 100px; height: 26px; font-size: 14px; color: #666666; border-radius: 0; border: 1px solid #f1f1f1; background-color: white; line-height: 26px; vertical-align: middle; box-shadow: none; box-sizing: content-box; -webkit-appearance: menulist; appearance: menulist; }
#kboard-contact-form-list .kboard-search input { display: inline; margin: 0; padding: 0 5px; width: 200px; height: 26px; font-size: 14px; color: #666666; border-radius: 0; border: 1px solid #f1f1f1; background-color: white; line-height: 26px; vertical-align: middle; box-shadow: none; box-sizing: content-box; }
#kboard-contact-form-list .kboard-control { float: left; padding-bottom: 15px; width: 100%; text-align: right; }

/* =============================== */
/* Admin Document (관리자 상세 스타일) */
/* =============================== */
#kboard-contact-form-document { display: inline-block; *display: inline; zoom: 1; margin: 0; width: 100%; }
#kboard-contact-form-document .kboard-document-wrap { float: left; width: 100%; background-color: white; }
#kboard-contact-form-document .kboard-title { float: left; width: 100%; }
#kboard-contact-form-document .kboard-title h1 { margin: 0; padding: 12px 22px; color: #545861; font-weight: bold; font-size: 22px; line-height: 30px; text-align: left; }
#kboard-contact-form-document .kboard-detail { clear: both; float: left; width: 100%; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; background-color: #f9f9f9; font-size: 14px; }
#kboard-contact-form-document .kboard-detail .detail-attr { display: inline-block; float: left; margin: 0; padding: 12px 35px 12px 22px; }
#kboard-contact-form-document .kboard-detail .detail-attr .detail-name { float: left; font-weight: bold; color: #545861; text-align: right; }
#kboard-contact-form-document .kboard-detail .detail-attr .detail-value { float: left; padding-left: 20px; color: #545861; }
#kboard-contact-form-document .kboard-detail .detail-attr .detail-value a { color: #545861; text-decoration: none; border: 0; box-shadow: none; }
#kboard-contact-form-document .kboard-content { clear: both; float: left; width: 100%; min-height: 200px; }
#kboard-contact-form-document .kboard-content .content-view { margin: 0; padding: 22px; word-break: break-all; }
#kboard-contact-form-document .kboard-content .content-view iframe { max-width: 100%; }
#kboard-contact-form-document .kboard-content .content-view img { display: inline; margin: 0; vertical-align: middle; max-width: 100%; }
#kboard-contact-form-document .kboard-document-action { padding: 0 22px 5px 22px; overflow: hidden; line-height: 1; }
#kboard-contact-form-document .kboard-document-action .left { position: static; float: left; }
#kboard-contact-form-document .kboard-document-action .right { position: static; float: right; text-align: right; }
#kboard-contact-form-document .kboard-attach { clear: both; margin: 0 22px; padding: 10px 0 5px 0; font-size: 13px; overflow: hidden; line-height: 1; border-top: 1px dashed #ededed; }
#kboard-contact-form-document .kboard-button-action { margin: 0 0 5px 0; padding: 4px 5px; font-size: 13px; font-weight: normal; line-height: 12px; text-align: left; border: 1px solid #ededed; background-color: white; border-radius: 2px; cursor: pointer; vertical-align: middle; text-shadow: none; box-shadow: none; }
#kboard-contact-form-document .kboard-button-action span { position: static; display: inline; margin: 0; padding: 0; font-size: 13px; line-height: 12px; }
#kboard-contact-form-document .kboard-button-like { color: #ff5959; }
#kboard-contact-form-document .kboard-button-unlike { color: #3d62aa; }
#kboard-contact-form-document .kboard-button-print { color: gray; }
#kboard-contact-form-document .kboard-button-download { color: gray; }
#kboard-contact-form-document .kboard-comments-area { float: left; width: 100%; }
#kboard-contact-form-document .kboard-document-navi { float: left; padding-top: 15px; width: 100%; }
#kboard-contact-form-document .kboard-document-navi a { display: block; text-decoration: none; border: 0; font-size: 14px; line-height: 20px; box-shadow: none; color: #545861; transition-duration: .3s; }
#kboard-contact-form-document .kboard-document-navi .navi-document-title { display: block; }
#kboard-contact-form-document .kboard-document-navi .navi-arrow { position: absolute; display: block; }
#kboard-contact-form-document .kboard-document-navi .kboard-prev-document { position: relative; float: left; width: 45%; }
#kboard-contact-form-document .kboard-document-navi .kboard-prev-document .navi-document-title { padding-left: 15px; }
#kboard-contact-form-document .kboard-document-navi .kboard-prev-document .navi-arrow { left: 0; top: 0; }
#kboard-contact-form-document .kboard-document-navi .kboard-next-document { position: relative; float: right; width: 45%; text-align: right; }
#kboard-contact-form-document .kboard-document-navi .kboard-next-document .navi-document-title { padding-right: 15px; }
#kboard-contact-form-document .kboard-document-navi .kboard-next-document .navi-arrow { right: 0; top: 0; }
#kboard-contact-form-document .kboard-control { float: left; padding: 15px 0; width: 100%; }
#kboard-contact-form-document .kboard-control .left { position: static; float: left; }
#kboard-contact-form-document .kboard-control .right { position: static; float: right; text-align: right; }