@charset "utf-8";
/* ==========================================================================
   SUDA CUSTOM (2026-10-24): 상품 상세 후기 섹션 (extend/suda_review_v2.lib.extend.php, js/suda_review_v2.js)
   하나투어 후기 구성 참고 - 색·글자·아이콘은 투어수다 (별 #f59e0b = 상세 상단 평점과 같음, 포인트 --suda-blue)
   ========================================================================== */
.srv{ position: relative; color: var(--suda-gray-900); }
.srv .sound_only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 별 (소수점 부분 채움) */
.srv-stars{ position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.srv-stars svg{ width: 18px; height: 18px; margin-right: 2px; }
.srv-stars-bg svg{ fill: var(--suda-gray-200); }
.srv-stars-fill{ position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.srv-stars-fill svg{ fill: #f59e0b; }
.srv-stars.is-lg svg{ width: 30px; height: 30px; margin-right: 3px; }

/* 후기 없음 */
.srv-empty{ padding: 48px 20px; border: 1px solid var(--suda-gray-200); border-radius: 12px; text-align: center; }
.srv-empty-title{ margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.srv-empty-desc{ margin: 0; font-size: 14px; color: var(--suda-gray-500); }

/* 요약 박스 */
.srv-summary{ padding: 32px 32px 24px; border: 1px solid var(--suda-gray-200); border-radius: 12px; }
.srv-sum-score{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
.srv-sum-avg{ margin: 0; line-height: 1; }
.srv-sum-avg b{ font-size: 52px; font-weight: 800; letter-spacing: -0.02em; }
.srv-sum-avg span{ margin-left: 4px; font-size: 22px; color: var(--suda-gray-400); }
.srv-sum-count{ margin: 0; font-size: 14px; color: var(--suda-gray-500); }
.srv-sum-comp{ max-width: 380px; margin: 20px auto 0; padding: 10px 16px; border-radius: 8px; background: var(--suda-gray-50); font-size: 15px; text-align: center; }
.srv-sum-comp b{ color: var(--suda-blue); font-weight: 700; }
.srv-sum-tags{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; max-width: 760px; margin: 20px auto 0; padding: 0; list-style: none; }
.srv-sum-tags li{ display: flex; align-items: center; gap: 16px; }
.srv-sum-tag{ flex: 1 1 auto; min-width: 0; padding: 9px 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(65,84,255,.1), rgba(65,84,255,.03)); font-size: 14px; font-weight: 700; color: var(--suda-gray-900); }
.srv-sum-tag-cnt{ flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--suda-blue); }
.srv-sum-note{ margin: 20px 0 0; font-size: 12px; color: var(--suda-gray-500); }
.srv-sum-note::before{ content: "• "; }

/* 목록 위: 총 N건 + 정렬 / 필터 바 */
.srv-bar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; scroll-margin-top: calc(var(--suda-header-h, 96px) + 40px); }
.srv-total{ margin: 0; font-size: 15px; }
.srv-total b{ color: var(--suda-blue); }
.srv-sort{ display: flex; gap: 14px; }
.srv-sort-btn{ padding: 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--suda-gray-700); cursor: pointer; }
.srv-sort-btn.is-active{ color: var(--suda-blue); }
.srv-filter{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; padding: 14px 18px; border-radius: 8px; background: var(--suda-gray-50); }
.srv-filter-comp{ min-width: 220px; height: 42px; padding: 0 12px; border: 1px solid var(--suda-gray-200); border-radius: 8px; background: #fff; font-size: 14px; }
.srv-filter-media{ display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; cursor: pointer; }
.srv-filter-reset{ display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--suda-gray-200); border-radius: 8px; background: #fff; font-size: 14px; color: var(--suda-gray-700); cursor: pointer; }
.srv-filter-reset svg{ width: 15px; height: 15px; }

/* 후기 목록 (카드 아님 - 구분선) */
.srv-list-box.is-loading{ opacity: .5; }
.srv-list{ margin: 0; padding: 0; list-style: none; }
.srv-item{ padding: 26px 0; border-bottom: 1px solid var(--suda-gray-200); }
.srv-item-top{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--suda-gray-500); }
.srv-item-score{ display: inline-flex; align-items: center; gap: 3px; font-size: 16px; font-weight: 800; color: var(--suda-gray-900); }
.srv-item-score svg{ width: 17px; height: 17px; color: #f59e0b; fill: #f59e0b; }
.srv-item-who{ display: inline-flex; align-items: center; gap: 6px; }
.srv-avatar{ display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--suda-gray-100); color: var(--suda-gray-400); }
.srv-avatar svg{ width: 13px; height: 13px; }
.srv-item-comp::before, .srv-item-date::before{ content: "·"; margin-right: 10px; color: var(--suda-gray-200); }
.srv-report{ margin-left: auto; padding: 0; border: 0; background: none; font-size: 13px; color: var(--suda-gray-400); cursor: pointer; }
.srv-report:hover{ color: var(--suda-gray-700); text-decoration: underline; }
.srv-item-meta{ margin: 10px 0 0; font-size: 13px; }
.srv-item-meta > div{ display: flex; gap: 20px; padding: 2px 0; }
.srv-item-meta dt{ flex: 0 0 44px; color: var(--suda-gray-500); }
.srv-item-meta dd{ margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--suda-gray-900); }
.srv-item-body{ margin-top: 14px; }
.srv-item-text{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
.srv-item-body.is-open .srv-item-text{ display: block; -webkit-line-clamp: unset; }
.srv-more{ display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; padding: 0; border: 0; background: none; font-size: 13px; color: var(--suda-gray-500); cursor: pointer; }
.srv-more svg{ width: 14px; height: 14px; transition: transform .2s ease; }
.srv-item-body.is-open .srv-more svg{ transform: rotate(180deg); }
.srv-photos{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.srv-photo{ width: 80px; height: 80px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--suda-gray-100); cursor: zoom-in; }
.srv-photo img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.srv-videos{ margin-top: 14px; max-width: 480px; }
.srv-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.srv-tags li{ padding: 5px 10px; border-radius: 6px; background: var(--suda-gray-50); font-size: 13px; font-weight: 600; color: var(--suda-gray-700); }
.srv-helpful{ display: inline-flex; align-items: center; gap: 6px; height: 38px; margin-top: 18px; padding: 0 14px; border: 1px solid var(--suda-gray-200); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 700; color: var(--suda-gray-700); cursor: pointer; }
.srv-helpful .srv-thumb{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.srv-helpful.is-on{ border-color: var(--suda-blue); color: var(--suda-blue); }
.srv-helpful.is-on .srv-thumb{ fill: rgba(65,84,255,.15); }
.srv-none-filter{ padding: 40px 0; border-bottom: 1px solid var(--suda-gray-200); text-align: center; font-size: 14px; color: var(--suda-gray-500); }
.srv-pages{ display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.srv-page{ min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: none; font-size: 14px; color: var(--suda-gray-700); cursor: pointer; }
.srv-page.is-active{ background: var(--suda-gray-900); color: #fff; font-weight: 700; }

/* 창 (사진 크게 보기 / 신고) */
.srv-modal{ position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(17,24,39,.6); }
.srv-modal[hidden]{ display: none; }
.srv-modal-box{ position: relative; width: 100%; max-width: 420px; padding: 22px; border-radius: 14px; background: #fff; box-sizing: border-box; }
.srv-modal-box.is-photo{ max-width: 860px; padding: 0; background: transparent; }
.srv-modal-box.is-photo img{ display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; border-radius: 10px; }
.srv-modal-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 17px; }
.srv-modal-close{ display: inline-flex; padding: 4px; border: 0; background: none; color: var(--suda-gray-500); cursor: pointer; }
.srv-modal-box.is-photo .srv-modal-close{ position: absolute; right: 8px; top: 8px; z-index: 1; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; }
.srv-modal-close svg{ width: 20px; height: 20px; }
.srv-report-reasons{ display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 0; border: 0; }
.srv-report-reasons label{ display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.srv-modal-box textarea{ width: 100%; padding: 10px 12px; border: 1px solid var(--suda-gray-200); border-radius: 8px; font-size: 14px; box-sizing: border-box; resize: vertical; }
.srv-report-submit{ width: 100%; height: 46px; margin-top: 12px; border: 0; border-radius: 10px; background: var(--suda-gray-900); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.srv-toast{ position: fixed; left: 50%; bottom: 40px; z-index: 1001; margin: 0; padding: 12px 20px; border-radius: 999px; background: rgba(17,24,39,.9); color: #fff; font-size: 14px; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.srv-toast.is-show{ opacity: 1; transform: translate(-50%, 0); }

@media screen and (max-width:1024px){
    .srv-summary{ padding: 3.13vw 3.13vw 2.34vw; }
    .srv-sum-avg b{ font-size: 5.08vw; }
    .srv-sum-avg span{ font-size: 2.15vw; }
    .srv-stars.is-lg svg{ width: 2.93vw; height: 2.93vw; }
    .srv-sum-tags{ gap: 0.98vw 3.13vw; }
    .srv-item{ padding: 2.54vw 0; }
    .srv-item-text{ font-size: 1.46vw; }
}
@media screen and (max-width:768px){
    .srv-summary{ padding: 4.17vw 3.13vw 3.13vw; border-radius: 1.56vw; }
    .srv-sum-avg b{ font-size: 6.25vw; }
    .srv-sum-avg span{ font-size: 2.6vw; }
    .srv-stars.is-lg svg{ width: 3.65vw; height: 3.65vw; }
    .srv-sum-count, .srv-sum-tag, .srv-sum-tag-cnt, .srv-total, .srv-sort-btn, .srv-filter-media, .srv-filter-reset, .srv-filter-comp{ font-size: 1.82vw; }
    .srv-sum-comp{ font-size: 1.95vw; }
    .srv-sum-tags{ grid-template-columns: minmax(0, 1fr); gap: 1.3vw; }
    .srv-sum-note{ font-size: 1.56vw; }
    .srv-filter{ padding: 1.82vw 2.08vw; }
    .srv-filter-comp{ flex: 1 1 100%; min-width: 0; height: 5.47vw; }
    .srv-filter-media{ margin-left: 0; }
    .srv-filter-reset{ height: 5.21vw; margin-left: auto; }
    .srv-item{ padding: 3.39vw 0; }
    .srv-item-top, .srv-item-meta, .srv-report, .srv-more, .srv-tags li, .srv-helpful{ font-size: 1.69vw; }
    .srv-item-score{ font-size: 2.08vw; }
    .srv-item-text{ font-size: 1.95vw; }
    .srv-photo{ width: 10.42vw; height: 10.42vw; }
    .srv-helpful{ height: 4.95vw; }
}
@media screen and (max-width:480px){
    .srv-empty{ padding: 8.33vw 4.17vw; }
    .srv-empty-title{ font-size: 3.54vw; }
    .srv-empty-desc{ font-size: 2.92vw; }
    .srv-summary{ padding: 6.25vw 4.17vw 4.17vw; border-radius: 2.5vw; }
    .srv-sum-score{ gap: 1.67vw 3.33vw; }
    .srv-sum-avg b{ font-size: 10.83vw; }
    .srv-sum-avg span{ font-size: 4.17vw; }
    .srv-stars.is-lg svg{ width: 5.83vw; height: 5.83vw; }
    .srv-sum-count, .srv-sum-tag, .srv-sum-tag-cnt, .srv-total, .srv-sort-btn, .srv-filter-media, .srv-filter-reset, .srv-filter-comp{ font-size: 2.92vw; }
    .srv-sum-comp{ margin-top: 4.17vw; padding: 2.08vw 3.33vw; font-size: 3.13vw; }
    .srv-sum-tags{ gap: 2.08vw; margin-top: 4.17vw; }
    .srv-sum-tag{ padding: 2.08vw 2.92vw; }
    .srv-sum-note{ margin-top: 4.17vw; font-size: 2.5vw; }
    .srv-bar{ margin-top: 6.67vw; }
    .srv-sort{ gap: 3.33vw; }
    .srv-filter{ gap: 2.08vw 3.33vw; padding: 3.33vw; }
    .srv-filter-comp{ height: 9.17vw; }
    .srv-filter-reset{ height: 8.33vw; padding: 0 3.33vw; }
    .srv-item{ padding: 5.42vw 0; }
    .srv-item-top, .srv-item-meta, .srv-report, .srv-more, .srv-tags li, .srv-helpful{ font-size: 2.71vw; }
    .srv-item-score{ font-size: 3.33vw; }
    .srv-item-meta > div{ gap: 3.33vw; }
    .srv-item-meta dt{ flex-basis: 10vw; }
    .srv-item-text{ font-size: 3.13vw; }
    .srv-photos{ gap: 1.67vw; }
    .srv-photo{ width: 16.67vw; height: 16.67vw; }
    .srv-helpful{ height: 7.92vw; }
    .srv-page{ min-width: 7.08vw; height: 7.08vw; font-size: 2.92vw; }
}

/* ---- 후기 작성 (mypage/review_form.php) ---- */
.srv-my-score{ margin-left: 4px; font-size: 14px; }
.srv-pick-stars{ display: inline-flex; align-items: center; gap: 4px; }
.srv-pick-star{ position: relative; display: inline-block; width: 34px; height: 34px; }
.srv-pick-star::before, .srv-pick-star::after{ content: ""; position: absolute; inset: 0; background: center / 34px 34px no-repeat; pointer-events: none; }
.srv-pick-star::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e5e7eb' d='M12 2.5l2.94 6.05 6.56.95-4.75 4.62 1.12 6.53L12 17.6l-5.87 3.05 1.12-6.53L2.5 9.5l6.56-.95z'/%3E%3C/svg%3E"); }
.srv-pick-star::after{ width: 0; background-position: left center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2.5l2.94 6.05 6.56.95-4.75 4.62 1.12 6.53L12 17.6l-5.87 3.05 1.12-6.53L2.5 9.5l6.56-.95z'/%3E%3C/svg%3E"); }
.srv-pick-star.is-half::after{ width: 50%; }
.srv-pick-star.is-full::after{ width: 100%; }
.srv-pick-star input{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.srv-pick-star label{ position: absolute; top: 0; bottom: 0; z-index: 1; width: 50%; cursor: pointer; }
.srv-pick-star label.is-half{ left: 0; }
.srv-pick-star label.is-full{ right: 0; }
.srv-pick-star input:focus-visible + label{ outline: 2px solid var(--suda-blue); outline-offset: 1px; border-radius: 4px; }
.srv-pick-value{ margin-left: 8px; font-size: 15px; font-weight: 700; color: var(--suda-gray-900); }
.srv-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.srv-chip{ position: relative; display: inline-flex; cursor: pointer; }
.srv-chip input{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.srv-chip span{ display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--suda-gray-200); border-radius: 19px; background: #fff; font-size: 14px; color: var(--suda-gray-700); }
.srv-chip input:checked + span{ border-color: var(--suda-blue); background: rgba(65,84,255,.08); color: var(--suda-blue); font-weight: 700; }
.srv-chip input:focus-visible + span{ outline: 2px solid var(--suda-blue); outline-offset: 2px; }
.srv-chip.is-num span{ justify-content: center; width: 38px; padding: 0; }
.srv-subs{ display: flex; flex-direction: column; gap: 10px; }
.srv-sub{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.srv-sub-name{ flex: 0 0 80px; font-size: 14px; font-weight: 600; color: var(--suda-gray-700); }
@media screen and (max-width:480px){
    .srv-pick-star{ width: 8.33vw; height: 8.33vw; }
    .srv-pick-star::before, .srv-pick-star::after{ background-size: 8.33vw 8.33vw; }
    .srv-pick-value{ font-size: 3.33vw; }
    .srv-chips{ gap: 1.67vw; }
    .srv-chip span{ height: 8.33vw; padding: 0 3.33vw; border-radius: 4.17vw; font-size: 3.13vw; }
    .srv-chip.is-num span{ width: 8.33vw; }
    .srv-sub-name{ flex-basis: 100%; font-size: 3.13vw; }
}

/* ==========================================================================
   SUDA CUSTOM (2026-10-25): 하나투어 호텔 후기와 맞춤 - 좋았던 점(선 아이콘 + 비율 그라데이션 막대 + 인원 수 2열), 상품명/평점 줄, 페이지 번호
   원본: css/suda_review_v2.css.bak.20261025
   ========================================================================== */
.srv-tag-ic{ flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.srv-summary{ text-align: center; }
.srv-sum-tags{ max-width: 800px; gap: 10px 40px; text-align: left; }
.srv-sum-tags li{ gap: 12px; }
.srv-sum-tag{ position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 6px; background: var(--suda-gray-50); overflow: hidden; }
.srv-sum-bar{ position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(to left, rgba(65,84,255,.14) 0%, rgba(253,217,0,.28) 100%); }
.srv-sum-tag .srv-tag-ic, .srv-sum-tag-txt{ position: relative; z-index: 1; }
.srv-sum-tag .srv-tag-ic{ color: var(--suda-blue); }
.srv-sum-tag-txt{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--suda-gray-900); }
.srv-sum-tag-cnt{ flex: 0 0 48px; text-align: right; font-size: 13px; font-weight: 500; color: var(--suda-gray-700); }
.srv-sum-tag-cnt b{ margin-right: 2px; font-weight: 800; color: var(--suda-blue); }
.srv-sum-note{ text-align: left; }
.srv-item-meta dt{ color: var(--suda-gray-400); font-size: 13px; }
.srv-item-meta dd{ font-size: 13px; }
.srv-tags li{ display: inline-flex; align-items: center; gap: 5px; }
.srv-tags .srv-tag-ic{ width: 14px; height: 14px; color: var(--suda-gray-500); }
.srv-pages{ align-items: center; gap: 4px; }
.srv-page{ min-width: 30px; height: 30px; padding: 0 6px; border-radius: 0; background: none; font-weight: 500; color: var(--suda-gray-500); }
.srv-page:hover{ color: var(--suda-gray-900); }
.srv-page.is-active{ background: none; color: var(--suda-blue); font-weight: 800; }
.srv-page.is-arrow{ display: inline-flex; align-items: center; justify-content: center; width: 28px; min-width: 28px; height: 28px; padding: 0; margin: 0 4px; border: 1px solid var(--suda-gray-200); border-radius: 4px; color: var(--suda-gray-700); }
.srv-page.is-arrow svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media screen and (max-width:768px){
    .srv-sum-tag{ height: 4.43vw; padding: 0 1.56vw; border-radius: 0.78vw; }
    .srv-sum-tag-txt, .srv-sum-tag-cnt{ font-size: 1.69vw; }
    .srv-sum-tag-cnt{ flex-basis: 6.25vw; }
    .srv-tag-ic{ width: 2.08vw; height: 2.08vw; }
}
@media screen and (max-width:480px){
    .srv-sum-tags li{ gap: 2.5vw; }
    .srv-sum-tag{ height: 8.33vw; gap: 1.25vw; padding: 0 2.92vw; border-radius: 1.25vw; }
    .srv-sum-tag-txt, .srv-sum-tag-cnt{ font-size: 2.92vw; }
    .srv-sum-tag-cnt{ flex-basis: 10.83vw; }
    .srv-tag-ic{ width: 3.75vw; height: 3.75vw; }
    .srv-tags .srv-tag-ic{ width: 3.33vw; height: 3.33vw; }
    .srv-page{ min-width: 7.5vw; height: 7.5vw; font-size: 3.13vw; }
    .srv-page.is-arrow{ width: 7.08vw; min-width: 7.08vw; height: 7.08vw; margin: 0 0.83vw; }
}

/* ============================================================================
   SUDA CUSTOM (2026-10-25): 다녀온 지역 안전 체감 (extend/suda_review_safety.lib.extend.php) + 내 후기 수정·삭제
   단계 색: 안전해요 초록 / 대체로 괜찮아요 파랑 / 주의가 필요해요 노랑 / 위험해요 빨강
   ============================================================================ */
.srs-badge{ display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.srs-lv1.srs-badge{ background: #dcfce7; color: #15803d; }
.srs-lv2.srs-badge{ background: #dbeafe; color: #1d4ed8; }
.srs-lv3.srs-badge{ background: #fef08a; color: #854d0e; }
.srs-lv4.srs-badge{ background: #fee2e2; color: #b91c1c; }
.srs-notice{ margin: 0; font-size: 12px; line-height: 1.6; color: var(--suda-gray-500); }
.srs-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.srs-tags li{ padding: 4px 10px; border-radius: 6px; background: var(--suda-gray-50); font-size: 12px; font-weight: 600; color: var(--suda-gray-700); }
.srs-tags li.is-warn{ background: #fff7ed; color: #c2410c; }
.srs-tags li b{ margin-left: 2px; color: var(--suda-blue); }
/* 상품 상세: 요약 아래 지역별 집계 */
.srs-sum{ margin: 16px 0 0; padding: 20px 24px; border: 1px solid var(--suda-gray-100); border-radius: 16px; background: #fff; }
.srs-sum-title{ display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--suda-gray-900); }
.srs-sum-title svg, .srs-review-title svg, .srs-tip svg{ width: 18px; height: 18px; color: var(--suda-blue); }
.srs-sum-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; }
.srs-sum-item{ padding: 14px 16px; border-radius: 12px; background: var(--suda-gray-50); }
.srs-sum-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 15px; }
.srs-sum-cnt{ font-size: 13px; font-weight: 700; color: var(--suda-gray-700); }
.srs-few{ font-size: 12px; color: var(--suda-gray-400); }
.srs-sum-item .srs-tags li{ background: #fff; }
/* 후기 1건 */
.srs-review{ margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--suda-gray-50); }
.srs-review-title{ display: flex; align-items: center; gap: 5px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--suda-gray-700); }
.srs-review > ul{ display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.srs-review-head{ display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.srs-review .srs-tags li{ background: #fff; }
.srs-tip{ display: flex; align-items: flex-start; gap: 5px; margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--suda-gray-700); }
.srs-tip svg{ flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; }
/* 작성·수정 폼 */
.srs-optional{ margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--suda-gray-400); }
.srs-form .srs-notice{ margin-bottom: 10px; padding: 10px 12px; border-radius: 8px; background: #fffbeb; color: #92400e; }
.srs-rows{ display: grid; gap: 12px; }
.srs-row{ display: grid; gap: 10px; padding: 14px; border: 1px solid var(--suda-gray-200); border-radius: 12px; background: #fff; }
.srs-row-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.srs-region{ min-width: 160px; }
.srs-region-etc{ flex: 1 1 180px; min-width: 0; }
.srs-region-etc[hidden]{ display: none; }
.srs-row-del{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: auto; padding: 0; border: 1px solid var(--suda-gray-200); border-radius: 8px; background: #fff; color: var(--suda-gray-500); cursor: pointer; }
.srs-row-del svg{ width: 16px; height: 16px; }
.srs-levels{ display: flex; flex-wrap: wrap; gap: 6px; }
.srs-level{ position: relative; display: inline-flex; cursor: pointer; }
.srs-level input{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.srs-level span{ display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--suda-gray-200); border-radius: 18px; background: #fff; font-size: 13px; font-weight: 600; color: var(--suda-gray-700); }
.srs-level input:focus-visible + span{ outline: 2px solid var(--suda-blue); outline-offset: 2px; }
.srs-level.srs-lv1 input:checked + span{ border-color: #16a34a; background: #dcfce7; color: #15803d; }
.srs-level.srs-lv2 input:checked + span{ border-color: #2563eb; background: #dbeafe; color: #1d4ed8; }
.srs-level.srs-lv3 input:checked + span{ border-color: #ca8a04; background: #fef08a; color: #854d0e; }
.srs-level.srs-lv4 input:checked + span{ border-color: #dc2626; background: #fee2e2; color: #b91c1c; }
.srs-tag-pick{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.srs-tag-kind{ flex: 0 0 72px; font-size: 12px; font-weight: 700; color: var(--suda-gray-500); }
.srs-tag-pick .srv-chip span{ height: 32px; padding: 0 12px; font-size: 13px; }
.srs-tag-pick.is-warn .srv-chip input:checked + span{ border-color: #ea580c; background: #fff7ed; color: #c2410c; }
.srs-add{ display: inline-flex; align-items: center; gap: 4px; height: 36px; margin-top: 10px; padding: 0 14px; border: 1px dashed var(--suda-gray-400); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 700; color: var(--suda-gray-700); cursor: pointer; }
.srs-add svg{ width: 16px; height: 16px; }
.srs-add[hidden]{ display: none; }
/* 내 후기: 신고 대신 수정·삭제 / 수정 폼의 기존 사진 */
.srv-own{ display: inline-flex; gap: 8px; margin-left: auto; }
.srv-own-btn{ padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--suda-gray-500); cursor: pointer; }
.srv-own-btn:hover{ color: var(--suda-blue); }
.srv-edit-media{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.srv-edit-media label{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--suda-gray-500); cursor: pointer; }
.srv-edit-media img, .srv-edit-video{ display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: var(--suda-gray-100); font-size: 12px; }
.srv-edit-media input{ position: absolute; top: 4px; left: 4px; }
.srv-edit-media input:checked ~ img, .srv-edit-media input:checked ~ .srv-edit-video{ opacity: .35; }
@media screen and (max-width:1024px){
    .srs-sum{ margin-top: 1.56vw; padding: 1.95vw 2.34vw; border-radius: 1.56vw; }
    .srs-sum-title{ margin-bottom: 1.17vw; font-size: 1.66vw; }
    .srs-sum-head{ font-size: 1.46vw; }
    .srs-badge{ height: 2.34vw; padding: 0 0.98vw; font-size: 1.17vw; }
    .srs-tags li{ padding: 0.39vw 0.98vw; font-size: 1.17vw; }
    .srs-notice, .srs-few{ font-size: 1.17vw; }
}
@media screen and (max-width:768px){
    .srs-sum{ margin-top: 2.08vw; padding: 2.6vw 3.13vw; border-radius: 2.08vw; }
    .srs-sum-title{ font-size: 2.21vw; }
    .srs-sum-list{ grid-template-columns: minmax(0, 1fr); gap: 1.56vw; }
    .srs-sum-head{ font-size: 1.95vw; }
    .srs-badge{ height: 3.13vw; padding: 0 1.3vw; font-size: 1.56vw; }
    .srs-tags li{ padding: 0.52vw 1.3vw; font-size: 1.56vw; }
    .srs-notice, .srs-few, .srv-own-btn{ font-size: 1.56vw; }
    .srs-review-head, .srs-tip{ font-size: 1.82vw; }
    .srs-tag-kind{ flex-basis: 100%; }
}
@media screen and (max-width:480px){
    .srs-sum{ margin-top: 3.33vw; padding: 4.17vw; border-radius: 3.33vw; }
    .srs-sum-title{ font-size: 3.54vw; }
    .srs-sum-head{ font-size: 3.13vw; }
    .srs-badge{ height: 5vw; padding: 0 2.08vw; font-size: 2.5vw; }
    .srs-tags li{ padding: 0.83vw 2.08vw; font-size: 2.5vw; }
    .srs-notice, .srs-few, .srv-own-btn{ font-size: 2.5vw; }
    .srs-review-head, .srs-tip{ font-size: 2.92vw; }
    .srs-row{ padding: 3.33vw; }
    .srs-region{ flex: 1 1 100%; min-width: 0; }
    .srs-level span{ height: 8.33vw; padding: 0 3.13vw; font-size: 2.92vw; }
    .srs-tag-pick .srv-chip span{ height: 7.5vw; padding: 0 2.71vw; font-size: 2.71vw; }
}