/* ==========================================================================
   P4(2026-10-16) 여행후기 - 사진/영상 미디어, 별점 표시/입력.
   상품상세 후기탭(skin/shop/basic/itemuse*.skin.php), 마이페이지, 관리자 후기 수정화면 공용.
   extend/suda_review.lib.extend.php 의 suda_review_add_stylesheet()가 필요한 화면에서만 붙인다.
   ========================================================================== */

.suda-review-media{ margin: 10px 110px 10px 0; }
.suda-review-photos{ display: flex; flex-wrap: wrap; gap: 8px; }
.suda-review-photo{ display: block; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: var(--suda-gray-100, #f1f3f5); }
.suda-review-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.suda-review-video{ display: block; width: 100%; max-width: 480px; margin-top: 8px; border-radius: 8px; background: #000; }
.suda-review-youtube{ position: relative; width: 100%; max-width: 480px; margin-top: 8px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.suda-review-youtube iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 별점 표시 */
.suda-review-stars{ display: inline-flex; gap: 2px; font-size: 16px; line-height: 1; color: var(--suda-gray-200, #e5e7eb); }
.suda-review-stars .is-on{ color: #fbbf24; }

/* 별점 입력 - 라디오를 역순(5→1)으로 두고 flex-direction: row-reverse로 뒤집어서 "~이하 전부 칠하기"를 CSS만으로 처리 */
.suda-review-star-input{ display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.suda-review-star-input input{ position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.suda-review-star-input label{ font-size: 30px; line-height: 1; color: var(--suda-gray-200, #e5e7eb); cursor: pointer; transition: color .1s ease; }
.suda-review-star-input input:checked ~ label,
.suda-review-star-input label:hover,
.suda-review-star-input label:hover ~ label{ color: #fbbf24; }
.suda-review-star-input input:focus-visible + label{ outline: 2px solid var(--suda-blue, #4154ff); outline-offset: 2px; border-radius: 4px; }

/* 작성 폼 */
.suda-review-target strong{ display: block; font-size: 15px; color: var(--suda-gray-900, #111); }
.suda-review-target span{ display: block; margin-top: 4px; font-size: 13px; color: var(--suda-gray-500, #6b7280); }
.suda-review-textarea{ width: 100%; min-height: 160px; padding: 12px 14px !important; line-height: 1.6; resize: vertical; box-sizing: border-box; }
.suda-review-form-wrap input[type="file"]{ max-width: 100%; font-size: 14px; }
.suda-review-form-wrap input[type="url"]{ margin-top: 10px; box-sizing: border-box; }
.suda-review-preview{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.suda-review-preview img{ width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }

@media (max-width: 768px){
    .suda-review-media{ margin-right: 0; }
}
@media (max-width: 480px){
    .suda-review-photo{ width: 20vw; height: 20vw; border-radius: 2vw; }
    .suda-review-star-input label{ font-size: 7.5vw; }
    .suda-review-stars{ font-size: 3.6vw; }
}