/**
 * 수강생 한줄후기 보정 (시안 원본에는 없는 테마 통합용 파일)
 *
 * 두 가지를 더한다.
 *
 * 1) 페이지 바
 *    시안은 후기 185건을 전부 HTML 에 담고 JS 로 페이징해서 버튼이 <button> 이다.
 *    테마는 서버 페이징을 쓰므로 링크(<a>)여야 하고, 그러면 시안의
 *    `.review-pagination button` 규칙이 걸리지 않는다. 같은 모양을 <a> 에도 입힌다.
 *    값은 시안 button 규칙과 같다. 시안 CSS 는 건드리지 않는다.
 *
 * 2) 후기 작성 폼
 *    시안에는 폼이 없다. 정적 시안이라 "후기 남기기" 를 운영 사이트 링크로 뒀는데,
 *    실제 이 페이지에는 예전부터 작성 폼이 있었고 지금도 후기가 여기로 들어온다.
 *    그래서 폼을 살리고, 시안이 쓰는 색·반경·간격에 맞춰 모양만 새로 잡았다.
 *    (#294e70 / #193b59 / #dce3eb / #e3e8ee / #43556a — 모두 student-reviews.css 값)
 */

/* ── 1) 페이지 바 ─────────────────────────────────────────── */

.review-pagination a {
    min-width: 40px;
    min-height: 42px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: #607286;
    text-decoration: none;
    cursor: pointer;
}

.review-pagination a[aria-current="page"] {
    background: #294e70;
    color: #fff;
    font-weight: 700;
}

.review-pagination a.is-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.review-pagination a:hover:not(.is-disabled):not([aria-current]) {
    background: #e6ecf3;
}

/* 예전 자료 중에는 수강 신청 경로가 비어 있는 것이 있다. 그럴 때는 경로 칩을
   만들지 않는데, .review-meta 가 space-between 이라 별점이 왼쪽으로 붙는다.
   시안과 같이 오른쪽에 두기 위한 보정. */
.review-card[data-route=""] .review-meta {
    justify-content: flex-end;
}

/* ── 2) 후기 작성 폼 ──────────────────────────────────────── */

/* 시안의 .review-write 는 <a> 였다. 여기서는 폼을 여닫는 <button> 이라
   기본 버튼 모양을 지우고 시안 값을 그대로 잇는다. */
button.review-write {
    border: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.review-form {
    margin: -4px 0 28px;
    padding: 24px 26px 26px;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px #20374d04;
}

.review-form-head {
    margin-bottom: 18px;
}

.review-form-head h3 {
    font-size: 17px;
    font-weight: 700;
    color: #294e70;
}

.review-form-head p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: #788695;
}

.review-form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.review-form-row > * {
    flex: 1 1 0;
    min-width: 0;
}

.review-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #4b6786;
}

.review-form input[type="text"],
.review-form select,
.review-form textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid #dce3eb;
    border-radius: 7px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: #43556a;
}

.review-form textarea {
    min-height: 108px;
    line-height: 1.7;
    resize: vertical;
}

.review-form input[type="text"]:focus,
.review-form select:focus,
.review-form textarea:focus {
    outline: 0;
    border-color: #a9c3e1;
    box-shadow: 0 0 0 3px #294e7014;
}

.review-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
}

.review-form-note {
    font-size: 12px;
    line-height: 1.7;
    color: #788695;
}

.review-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 24px;
    border: 0;
    border-radius: 7px;
    background: #294e70;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.review-form-submit:hover:not(:disabled) {
    background: #193b59;
}

.review-form-submit:disabled {
    opacity: .5;
    cursor: default;
}

@media (max-width: 767px) {
    .review-pagination a {
        min-width: 34px;
        padding: 8px;
    }

    .review-form {
        padding: 20px 18px 22px;
    }

    .review-form-row {
        display: block;
    }

    .review-form-row > * + * {
        margin-top: 12px;
    }

    .review-form-foot {
        display: block;
    }

    .review-form-submit {
        width: 100%;
        margin-top: 14px;
    }
}