/* [2026-09-28] 신규 - 도구 사용 후 별점 팝업 (public/js/review.js)
   디자인은 비로그인 한도 안내 모달(.ns-limit, main.css)과 톤을 맞춘다. */

.ns-review{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:20px;}
.ns-review.is-open{display:flex;}
.ns-review__dim{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.ns-review__box{
    position:relative;
    width:400px;
    max-width:100%;
    background:#fff;
    border-radius:16px;
    box-shadow:0 12px 40px rgba(0,0,0,.22);
    padding:30px 26px 22px;
    text-align:center;
    animation:nsReviewIn .2s ease-out;
}
@keyframes nsReviewIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.ns-review__title{font-size:17px;font-weight:800;color:#16181d;margin:0 0 16px;letter-spacing:-.02em;line-height:1.45;word-break:keep-all;}

/* 별점 */
.ns-review__stars{display:flex;justify-content:center;gap:6px;margin:0 0 8px;}
.ns-review__star{
    width:44px;
    height:44px;
    padding:0;
    border:0;
    background:none;
    font-size:36px;
    line-height:1;
    color:#dfe3e8;
    cursor:pointer;
    transition:color .12s, transform .12s;
}
.ns-review__star:hover{transform:scale(1.12);}
.ns-review__star.is-on{color:#ffb400;}
.ns-review__star:focus-visible{outline:2px solid #37be69;outline-offset:2px;border-radius:8px;}
.ns-review__score{font-size:13px;color:#8a919e;margin:0 0 16px;min-height:20px;line-height:20px;}

/* 한줄 코멘트 */
.ns-review__comment{
    display:block;
    width:100%;
    box-sizing:border-box;
    height:44px;
    padding:0 14px;
    border:1px solid #e0e4ea;
    border-radius:10px;
    font-size:14px;
    color:#16181d;
    background:#fafbfc;
}
.ns-review__comment:focus{outline:none;border-color:#37be69;background:#fff;}
.ns-review__msg{font-size:12px;color:#d64545;margin:8px 0 0;min-height:18px;line-height:18px;}

/* 버튼 */
.ns-review__btns{display:flex;gap:8px;justify-content:center;margin-top:10px;}
.ns-review__btn{
    flex:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:44px;
    border:0;
    border-radius:10px;
    background:#f0f2f5;
    color:#5b6270;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}
.ns-review__btn:hover{background:#e4e7ed;}
.ns-review__btn--primary{background:#37be69;color:#fff;}
.ns-review__btn--primary:hover{background:#0d8339;}
.ns-review__btn--primary:disabled{background:#b9e6c9;cursor:not-allowed;}

/* 제출 완료 */
.ns-review__done{display:none;padding:10px 0 8px;}
.ns-review.is-done .ns-review__form{display:none;}
.ns-review.is-done .ns-review__done{display:block;}
.ns-review__done-icon{font-size:40px;margin:0 0 10px;line-height:1;}
.ns-review__done-text{font-size:14px;color:#5b6270;margin:0;line-height:1.6;word-break:keep-all;}

@media (prefers-reduced-motion: reduce){
    .ns-review__box{animation:none;}
    .ns-review__star{transition:none;}
}

@media (max-width:768px){
    .ns-review{padding:clamp(14px, 2.6vw, 20px);}
    .ns-review__box{padding:clamp(22px, 3.9vw, 30px) clamp(18px, 3.39vw, 26px) clamp(16px, 2.86vw, 22px);}
    .ns-review__title{font-size:clamp(15px, 2.21vw, 17px);margin-bottom:clamp(12px, 2.08vw, 16px);}
    .ns-review__stars{gap:clamp(4px, 0.78vw, 6px);}
    .ns-review__star{width:clamp(36px, 5.73vw, 44px);height:clamp(36px, 5.73vw, 44px);font-size:clamp(30px, 4.69vw, 36px);}
    .ns-review__score{font-size:clamp(12px, 1.69vw, 13px);margin-bottom:clamp(12px, 2.08vw, 16px);}
    .ns-review__comment{height:clamp(40px, 5.73vw, 44px);font-size:clamp(13px, 1.82vw, 14px);}
    .ns-review__btn{height:clamp(40px, 5.73vw, 44px);font-size:clamp(13px, 1.82vw, 14px);}
    .ns-review__done-text{font-size:clamp(13px, 1.82vw, 14px);}
}