/* =========================================================
   PRETTY GARDEN Q&A
========================================================= */

.pgq{
    width:min(1380px, calc(100% - 48px));
    margin:0 auto;
    padding:88px 0 120px;
    color:#4b403d;
}

.pgq *{
    box-sizing:border-box;
}


/* HERO */

.pgq-hero{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    padding-bottom:34px;
    border-bottom:1px solid #eadfd9;
}

.pgq-kicker{
    margin:0 0 14px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.18em;
    color:#eb7e95;
}

.pgq-hero h1{
    margin:0;
    font-size:3rem;
    line-height:1;
    font-weight:500;
    letter-spacing:-.04em;
    color:#4b403d;
}

.pgq-intro{
    margin:22px 0 0;
    font-size:.95rem;
    line-height:1.85;
    color:#83746f;
}

.pgq-count{
    padding-bottom:4px;
    font-size:.68rem;
    letter-spacing:.13em;
    color:#aa9a94;
    white-space:nowrap;
}


/* CATEGORY */

.pgq-categories{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:24px 0 32px;
}

.pgq-categories a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 16px;
    border:1px solid #eadfd9;
    border-radius:999px;
    background:#fff;
    color:#80716c;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.04em;
    text-decoration:none;
    transition:.2s ease;
}

.pgq-categories a:hover{
    border-color:#e58499;
    color:#e58499;
}

.pgq-categories a.active{
    border-color:#554842;
    background:#554842;
    color:#fff;
}


/* BOARD */

.pgq-board{
    border-top:1px solid #dacec8;
}

.pgq-board-head,
.pgq-row{
    display:grid;
    grid-template-columns:
        72px
        150px
        minmax(0,1fr)
        140px
        100px;
    align-items:center;
}

.pgq-board-head{
    min-height:52px;
    border-bottom:1px solid #e8ddd8;
    color:#aa9a94;
    font-size:.67rem;
    font-weight:700;
    letter-spacing:.1em;
}

.pgq-row{
    min-height:72px;
    border-bottom:1px solid #eee5e1;
    transition:background .18s ease;
}

.pgq-row:hover{
    background:#fff9f7;
}

.pgq-col-no,
.pgq-col-category,
.pgq-col-name,
.pgq-col-date{
    padding:0 14px;
}

.pgq-col-subject{
    padding:0 18px;
}

.pgq-col-no{
    text-align:center;
    color:#ac9d98;
    font-size:.75rem;
}

.pgq-col-name,
.pgq-col-date{
    color:#82736e;
    font-size:.78rem;
}

.pgq-col-date{
    text-align:right;
}


/* CATEGORY BADGE */

.pgq-category-badge{
    display:inline-flex;
    align-items:center;
    min-height:25px;
    padding:0 10px;
    border-radius:999px;
    background:#fff0f3;
    color:#e5748d;
    font-size:.68rem;
    font-weight:700;
}

.pgq-category-badge.muted{
    background:#f3efed;
    color:#9e908b;
}


/* SUBJECT */

.pgq-subject-link{
    display:flex;
    align-items:center;
    gap:9px;
    color:#4b403d;
    text-decoration:none;
}

.pgq-subject-text{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.9rem;
}

.pgq-secret{
    flex:0 0 auto;
    padding:3px 7px;
    border-radius:999px;
    background:#f5eeee;
    color:#b08d8d;
    font-size:.58rem;
    font-weight:800;
    letter-spacing:.06em;
}

.pgq-comment-count{
    flex:0 0 auto;
    color:#e67b92;
    font-size:.7rem;
}


/* EMPTY */

.pgq-empty{
    padding:100px 20px;
    text-align:center;
    border-top:1px solid #e8ddd8;
    border-bottom:1px solid #e8ddd8;
}

.pgq-empty-flower{
    display:block;
    margin-bottom:18px;
    color:#e9869b;
    font-size:1.5rem;
}

.pgq-empty h2{
    margin:0;
    color:#51443f;
    font-size:1.2rem;
    font-weight:500;
}

.pgq-empty p{
    margin:16px 0 0;
    color:#93847e;
    font-size:.85rem;
    line-height:1.8;
}


/* FOOTER */

.pgq-list-footer{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:84px;
}

.pgq-pages{
    text-align:center;
}

.pgq-write-btn{
    position:absolute;
    right:0;
    top:22px;

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

    min-width:108px;
    height:42px;
    padding:0 20px;

    border-radius:999px;

    background:#ec7f96;
    color:#fff !important;

    font-size:.78rem;
    font-weight:700;

    text-decoration:none;
}

.pgq-write-btn:hover{
    opacity:.86;
}


/* GUIDE */

.pgq-guide{
    margin-top:42px;
    padding:24px 28px;
    border-radius:16px;
    background:#fff7f5;
    color:#8d7d77;
    font-size:.78rem;
    line-height:1.8;
}

.pgq-guide p{
    margin:0;
}

.pgq-guide p + p{
    margin-top:4px;
}

.pgq-guide strong{
    color:#e87890;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px){

    .pgq{
        width:min(100% - 30px, 1180px);
        padding:58px 0 90px;
    }

    .pgq-hero{
        display:block;
    }

    .pgq-count{
        margin-top:20px;
    }

    .pgq-hero h1{
        font-size:2.35rem;
    }

    .pgq-board-head{
        display:none;
    }

    .pgq-row{
        display:block;
        min-height:0;
        padding:20px 4px;
    }

    .pgq-col-no{
        display:none;
    }

    .pgq-col-category,
    .pgq-col-subject,
    .pgq-col-name,
    .pgq-col-date{
        padding:0;
    }

    .pgq-col-category{
        margin-bottom:10px;
    }

    .pgq-col-subject{
        margin-bottom:12px;
    }

    .pgq-col-name,
    .pgq-col-date{
        display:inline-block;
        margin-right:12px;
        font-size:.7rem;
    }

    .pgq-write-btn{
        position:static;
        margin-left:16px;
    }

}


/**글쓰기**/
/* =========================================================
   Q&A WRITE
========================================================= */

.pgq-write{
    width:min(880px, calc(100% - 48px));
    margin:0 auto;
    padding:78px 0 120px;
}

.pgq-write-head{
    padding-bottom:34px;
    border-bottom:1px solid #eadfd9;
}

.pgq-write-head .pgq-kicker{
    margin:0 0 14px;
}

.pgq-write-head h1{
    margin:0;
    color:#4b403d;
    font-size:2.25rem;
    line-height:1.2;
    font-weight:500;
    letter-spacing:-.03em;
}

.pgq-write-intro{
    margin:20px 0 0;
    color:#8b7c76;
    font-size:.88rem;
    line-height:1.8;
}


/* FORM */

.pgq-write form{
    padding-top:36px;
}

.pgq-field{
    margin-bottom:28px;
}

.pgq-field > label{
    display:block;
    margin-bottom:10px;
    color:#5b4d48;
    font-size:.78rem;
    font-weight:700;
}

.pgq-field input[type="text"],
.pgq-field input[type="password"],
.pgq-field input[type="email"],
.pgq-field select{
    width:100%;
    height:48px;
    padding:0 15px;

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

    background:#fff;
    color:#514540;

    font:inherit;

    outline:none;
}

.pgq-field input[type="text"]:focus,
.pgq-field input[type="password"]:focus,
.pgq-field input[type="email"]:focus,
.pgq-field select:focus{
    border-color:#e9869b;
}


/* SECRET */

.pgq-secret-field{
    padding:18px 20px;
    border-radius:12px;
    background:#fff7f5;
}

.pgq-secret-check{
    display:flex !important;
    align-items:center;
    gap:9px;

    margin:0 !important;

    cursor:pointer;
}

.pgq-secret-check input{
    width:16px;
    height:16px;
}

.pgq-secret-field p{
    margin:8px 0 0 25px;

    color:#9a8983;

    font-size:.72rem;
    line-height:1.6;
}


/* EDITOR */

.pgq-editor-box{
    width:100%;
}

.pgq-editor-box textarea{
    width:100% !important;
    min-height:280px !important;
}

.pgq-editor-box iframe{
    width:100% !important;
}


/* FILE */

.pgq-file-field input[type="file"]{
    width:100%;
    padding:13px;

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

    background:#fff;
}

.pgq-file-current{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;

    margin-top:8px;

    color:#92827c;
    font-size:.72rem;
}


/* WRITE ACTION */

.pgq-write-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;

    gap:9px;

    padding-top:28px;

    border-top:1px solid #eee5e1;
}

.pgq-cancel-btn,
.pgq-submit-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:110px;
    height:44px;

    padding:0 20px;

    border-radius:999px;

    font-size:.78rem;
    font-weight:700;

    text-decoration:none;

    cursor:pointer;
}

.pgq-cancel-btn{
    border:1px solid #dfd3ce;
    background:#fff;
    color:#776963 !important;
}

.pgq-submit-btn{
    border:1px solid #e77d94;
    background:#e77d94;
    color:#fff;
}

.pgq-submit-btn:hover{
    opacity:.88;
}

.pgq-submit-btn:disabled{
    opacity:.55;
    cursor:wait;
}



/* =========================================================
   Q&A VIEW
========================================================= */

.pgq-view{
    width:min(980px, calc(100% - 48px));
    margin:0 auto;
    padding:78px 0 120px;
}

.pgq-back{
    display:inline-block;

    margin-bottom:40px;

    color:#9c8d87;

    font-size:.76rem;

    text-decoration:none;
}

.pgq-back:hover{
    color:#e77d94;
}


/* VIEW HEADER */

.pgq-view-head{
    padding-bottom:34px;
    border-bottom:1px solid #e8ddd8;
}

.pgq-view-badges{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin:12px 0 18px;
}

.pgq-view-head h1{
    margin:0;

    color:#4b403d;

    font-size:2rem;
    line-height:1.35;

    font-weight:500;

    letter-spacing:-.03em;
}

.pgq-view-meta{
    display:flex;
    flex-wrap:wrap;

    gap:18px;

    margin-top:20px;

    color:#a0908a;

    font-size:.73rem;
}


/* VIEW CONTENT */

.pgq-view-content{
    min-height:260px;

    padding:52px 8px 64px;

    border-bottom:1px solid #eee5e1;
}

.pgq-content{
    color:#554946;

    font-size:.94rem;
    line-height:1.95;

    word-break:keep-all;
    overflow-wrap:break-word;
}

.pgq-content img{
    max-width:100%;
    height:auto;
}


/* FILE */

.pgq-files{
    padding:24px 8px;

    border-bottom:1px solid #eee5e1;
}

.pgq-file-title{
    margin:0 0 12px;

    color:#e67d93;

    font-size:.65rem;
    font-weight:700;

    letter-spacing:.12em;
}

.pgq-file-list{
    display:flex;
    flex-direction:column;

    gap:7px;
}

.pgq-file-link{
    color:#786a65;

    font-size:.78rem;

    text-decoration:none;
}

.pgq-file-link:hover{
    color:#e67d93;
}


/* VIEW ACTION */

.pgq-view-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:16px;

    padding:28px 0;
}

.pgq-action-left,
.pgq-action-right{
    display:flex;
    flex-wrap:wrap;

    gap:8px;
}

.pgq-view-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:78px;
    height:38px;

    padding:0 16px;

    border:1px solid #e1d5d0;
    border-radius:999px;

    background:#fff;

    color:#746661 !important;

    font-size:.74rem;
    font-weight:700;

    text-decoration:none;
}

.pgq-view-actions a:hover{
    border-color:#e77d94;
    color:#e77d94 !important;
}

.pgq-view-actions a.accent{
    border-color:#e77d94;

    background:#e77d94;

    color:#fff !important;
}


/* VIEW GUIDE */

.pgq-view-guide{
    margin-top:34px;

    padding:24px 28px;

    border-radius:16px;

    background:#fff7f5;

    color:#8c7d77;

    font-size:.77rem;
    line-height:1.8;
}

.pgq-view-guide strong{
    display:block;

    margin-bottom:6px;

    color:#e77d94;
}

.pgq-view-guide p{
    margin:0;
}

.pgq-view-guide p + p{
    margin-top:3px;
}


/* =========================================================
   Q&A WRITE + VIEW MOBILE
========================================================= */

@media (max-width:700px){

    .pgq-write,
    .pgq-view{
        width:calc(100% - 30px);
        padding:52px 0 85px;
    }

    .pgq-write-head h1{
        font-size:1.7rem;
    }

    .pgq-view-head h1{
        font-size:1.55rem;
    }

    .pgq-view-content{
        padding:38px 2px 48px;
    }

    .pgq-write-actions{
        justify-content:stretch;
    }

    .pgq-cancel-btn,
    .pgq-submit-btn{
        flex:1;
    }

    .pgq-view-actions{
        display:block;
    }

    .pgq-action-right{
        margin-top:12px;
    }

}


/* =========================================================
   Q&A ANSWER STATUS
========================================================= */

.pgq-status{
    flex:0 0 auto;

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

    min-height:22px;

    padding:0 8px;

    border-radius:999px;

    font-size:.6rem;
    font-weight:700;

    white-space:nowrap;
}


/* 답변 완료 */

.pgq-status-done{
    background:#fff0f3;
    color:#e16f88;
}


/* 답변 대기 */

.pgq-status-wait{
    background:#f3efed;
    color:#9a8b86;
}


/* 답글에는 상태 배지 없음 */

.pgq-row-answer .pgq-status{
    display:none;
}


/* MOBILE */

@media (max-width:900px){

    .pgq-status{
        margin-left:3px;
    }

}