/* BASIC css start */
@font-face {
    font-family: 'SUIT';
    font-weight: 300;
    font-display: swap;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 400;
    font-display: swap;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 500;
    font-display: swap;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 600;
    font-display: swap;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 700;
    font-display: swap;
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
}

#reviewBoard, #reviewBoard :where(a, input, select, textarea) { font: 400 0.813rem / 1.125rem "SUIT", "Dotum", sans-serif; color: #292929; }
#reviewBoard input[type=text],
#reviewBoard input[type=password] { width: 100%; height: 38px; padding: 0 15px; border: 1px solid #ececec; border-radius: 4px; box-sizing: border-box; outline: none; }
#reviewBoard textarea { width: 100%; height: 100px; padding: 10px; border: 1px solid #ececec; border-radius: 4px; box-sizing: border-box; outline: none; }
#reviewBoard select { width: 100%; height: 38px; padding: 0 15px; border: 1px solid #ececec; border-radius: 4px; box-sizing: border-box; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url(/images/common/ico_arr_bottom.svg) no-repeat right 15px center; }
#reviewBoard select::-ms-expand { display: none; }
#reviewBoard label { display: flex; align-items: center; gap: 5px; }

/* reviewBoard */
#reviewBoard .btn-fill { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 4px; background-color: #292929; color: #fff; box-sizing: border-box; font-weight: 500; }
#reviewBoard .btn-solid { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 4px; background-color: #fff; border: 1px solid #292929; box-sizing: border-box; font-weight: 500; }
#reviewBoard .btn-list { margin: 30px 15px; }
#reviewBoard .cond { display: flex; gap: var(--size-gap); }
#reviewBoard .cond .pr-plus { display: flex; gap: var(--size-gap); }
#reviewBoard .cond .review-search form { display: flex; gap: var(--size-gap); flex-wrap: wrap; }
#reviewBoard .cond .review-search select { flex: 1; }
#reviewBoard .cond .r-search { flex: 1.6; position: relative; }
#reviewBoard .cond .r-search input { padding-right: 40px; }
#reviewBoard .cond .r-search .btn { position: absolute; right: 15px; top: 0; width: 24px; height: 100%; background: url(/images/common/ico_search.svg) no-repeat center center; font-size: 0; }
#reviewBoard .cond .pr-cate-plus,
#reviewBoard .cond .pr-cate-minus { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid #ececec; border-radius: 4px; box-sizing: border-box; text-indent: -9999px; }
#reviewBoard .cond .pr-cate-plus { background: #fff url(/images/common/ico_plus.svg) no-repeat center center; }
#reviewBoard .cond .pr-cate-minus { background: #fff url(/images/common/ico_minus.svg) no-repeat center center; }
#reviewBoard .cond .pr-chk { display: flex; justify-content: right; }
#reviewBoard .tpl-flex { display: flex; align-items: center; }
#reviewBoard .tpl-flex-right { margin-left: auto; }
#reviewBoard .tpl-link { display: flex; align-items: center; border-bottom: 1px solid #ececec; }
#reviewBoard .tpl-link a { padding: 0 10px; border-right: 1px solid #ececec; color: #898989; display: flex; height: 12px; line-height: 12px; }
#reviewBoard .tpl-link li.now a { color: #292929; }
#reviewBoard .tpl-link li:first-child a { padding-left: 0; }
#reviewBoard .tpl-link li:last-child a { padding-right: 0; border-right: 0; }
#reviewBoard .pr-notice { margin-top: -1px; }
#reviewBoard .pr-notice .pr-q { height: 50px; align-content: center; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; }
#reviewBoard .pr-notice .pr-q a { display: block; background: url(/images/common/ico_arr_bottom.svg) no-repeat right 10px center; font-weight: 500; }
#reviewBoard .pr-notice .pr-q.pr-now a { background-image: url(/images/common/ico_arr_top.svg); }
#reviewBoard .pr-notice .pr-a { display: none; border-bottom: 1px solid #ececec; background-color: #f8f8f8; }
#reviewBoard .pr-notice .date { font-size: 12px; color: #a8a8a8; text-align: right; }
#reviewBoard .review-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); column-gap: 14px; row-gap: 10px; margin-top: 15px; }
#reviewBoard .review-list > li .pr-img { display: flex; }
#reviewBoard .review-list > li .pr-img img { width: 100%; border-radius: 4px; border: 1px solid #ececec; box-sizing: border-box; }
#reviewBoard .review-list > li .pr-info { margin-top: 12px; }
#reviewBoard .review-list > li .pr-info .pr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reviewBoard .review-list > li .pr-info .pr-price { margin-top: 5px; }
#reviewBoard .review-list > li .pr-grade { display: flex; align-items: center; }
#reviewBoard .review-list > li .pr-grade .pr-average { display: flex; align-items: center; gap: 7px; }
#reviewBoard .review-list > li .pr-grade .pr-number { display: flex; align-items: center; gap: 7px; margin-left: auto; }
#reviewBoard .review-list > li .pr-grade strong { color: #235BC2; font-weight: 600; }
#reviewBoard .review-list > li .pr-review-list { position: relative; margin-top: 15px; }
#reviewBoard .review-list > li .pr-review-list .pr-link { position: absolute; top: 0; right: 0; left: 0; bottom: 0; }
#reviewBoard .review-list > li .pr-review { margin-top: 12px; border-top: 1px solid #292929; }
#reviewBoard .review-list > li .pr-review li { padding: 15px 0 12px; border-bottom: 1px solid #ececec; }
#reviewBoard .review-list > li .pr-review li .pr-content { height: 36px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #656565; }
#reviewBoard .review-list > li .pr-review li .pr-depth { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
#reviewBoard .review-list > li .pr-review li .pr-depth span { display: flex; gap: 10px; align-items: center; color: #a8a8a8; }
#reviewBoard .review-list > li .pr-review li .pr-depth span:not(:last-child):after { content: ''; width: 1px; height: 10px; background-color: #d9d9d9; }


/* for desktop and tablet */
@media (min-width: 768px) {
#reviewBoard, #reviewBoard :where(a, input, select, textarea) { line-height: 1.25rem; }
#reviewBoard input[type=text],
#reviewBoard input[type=password] { height: 40px; padding: 0 10px; }
#reviewBoard select { height: 40px; padding: 0 5px; background-position: right 20px center; }
#reviewBoard {
    --size-gap: 7px;
}
#reviewBoard { margin-top: 60px; margin-bottom: 100px; }
#reviewBoard .cond { flex-wrap: wrap; }
#reviewBoard .cond .pr-cate-plus,
#reviewBoard .cond .pr-cate-minus { display: none; }
#reviewBoard .cond .pr-cate-add { display: block !important; }
#reviewBoard .cond .pr-cate { flex: 1; }
#reviewBoard .cond .review-search { flex: 2.5; }
#reviewBoard .cond .pr-chk { flex: none; width: 100%; font-size: 14px; }
#reviewBoard .tpl-link { margin-top: 20px; padding: 20px 0; border-top: 1px solid #ececec; }
#reviewBoard .tpl-link a { font-size: 14px; }
#reviewBoard .pr-notice .pr-q a { font-size: 14px; }
#reviewBoard .pr-notice .pr-a { padding: 20px 25px; }
#reviewBoard .is-mobile { display: none !important; }
#reviewBoard .paging { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 100px; }
#reviewBoard .paging a { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; }
#reviewBoard .paging a.now { background-color: #292929; }
#reviewBoard .paging a.now span { font-weight: 700; color: #fff; }
#reviewBoard .review-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 20px; row-gap: 40px; margin-top: 20px; }
#reviewBoard .review-list > li .pr-info { font-size: 15px; margin-top: 20px; }
#reviewBoard .review-list > li .pr-grade { font-size: 15px; }
#reviewBoard .review-list > li .pr-review li .pr-depth span { font-size: 12px; }
}

/* for mobile */
@media (max-width: 767.98px) {
#reviewBoard {
    --size-gap: 5px;
}
#reviewBoard { margin-top: 40px; margin-bottom: 0; }
#reviewBoard .cond { flex-direction: column; }
#reviewBoard .cond .review-search form { display: grid; }
#reviewBoard .cond .pr-cate-plus,
#reviewBoard .cond .pr-cate-minus { display: block; }
#reviewBoard .cond .pr-cate-add { display: none; }
#reviewBoard .cond .pr-cate-add.is-open { display: block; }
#reviewBoard .cond .pr-chk { margin-top: var(--size-gap); font-size: 12px; }
#reviewBoard .tpl-link { margin-top: 40px; padding: 0 0 15px; }
#reviewBoard .pr-notice { margin-right: -16px; margin-left: -16px; }
#reviewBoard .pr-notice .pr-q { padding: 0 15px; }
#reviewBoard .pr-notice .pr-a { padding: 20px; }
#reviewBoard .is-desktop { display: none !important; }
#reviewBoard .paging { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 30px 15px; }
#reviewBoard .paging a { width: auto; height: auto; display: flex; border: 0; font-size: 12px; }
#reviewBoard .paging a.now { background: 0; font-weight: 800; }
#reviewBoard .review-list > li .pr-review li .pr-content { font-size: 12px; }
#reviewBoard .review-list > li .pr-review li .pr-depth span { font-size: 11px; }
#reviewBoard .cond .r-search input { padding-right: 32px; }
#reviewBoard .cond .r-search .btn { right: 0; }
}
/* BASIC css end */

