/* ==========================================================================
   OTA 리뷰 섹션(상품 상세 itemView.jsp「What travelers say about this tour」) — 크림슨 MVP 톤 2026-10-09
   - 구조·동작은 리뷰 A안 그대로(탭 한 줄 가로 스크롤·하이라이트 높이 통일·별점 분포 막대·리뷰 2열/모바일 1열·
     하이라이트 중복 제거·답글 자리). 이 판에서 바꾼 것은 색·모양·글꼴뿐이다
   - 정본: 기획/자사몰-디자인-레퍼런스-2026-10-09/crimson/(첫 MVP 상품 페이지 mvp-styles.css) + review/(A안)
   - 스코프: body.trp-dsg .trp-ota-… (상품 상세 body 에만 trp-dsg 가 있다 → 다른 화면 영향 없음)
   - 색: 헤리티지 크림슨 #7C1B28(승인 브랜드 기록, 아이보리 #F6EDDC 와 짝). 공통 토큰은 trp-design.css 와 같은 값.
     크림슨 = 별·분포 막대·선택 표시·링크. 글자 대비(흰 바탕): 크림슨 10.3 · 본문 #3A3935 11.6 · 보조 #62605B 6.3.
     옅은 크림슨 24%(#E0C7C8) 위에는 글자를 두지 않는다(보조색 3.9:1 미달)
   - 모양: 모서리 2px(플랫폼 로고 원형만 예외) · 그림자 없음(1px 선으로 구획) · 평균 점수·하이라이트 인용은 세리프
   - 선택 = 크림슨 테두리 + 옅은 크림슨 바탕 + 크림슨 3px 안쪽 막대(MVP 옵션 선택 표기). 크림슨 단색 바탕은 예약 버튼 몫으로 남긴다
   - 터치: PC 조작 요소 ≥28px, 모바일(≤768px) ≥44px · 글자 ≥12px(로고 머리글자 포함)
   - 숨김 금지: 하이라이트 카드(.trp-ota-hlc)는 어떤 폭에서도 display:none 으로 가리지 않는다
   ========================================================================== */
body.trp-dsg .trp-ota-wrap {--trp-rv-brand: #7C1B28; --trp-rv-brand-deep: #5E141F; --trp-rv-link: #7C1B28;
    --trp-rv-tint6: #F7EFED; --trp-rv-tint12: #EFE2E1; --trp-rv-tint24: #E0C7C8; --trp-rv-ivory: #F6EDDC; --trp-rv-ivory-soft: #FBF6EC; --trp-rv-paper: #FFFDFA;
    --trp-rv-ink: #20201E; --trp-rv-text: #3A3935; --trp-rv-muted: #62605B; --trp-rv-meta: #6B6963; --trp-rv-line: #D7D0C5; --trp-rv-line-soft: #E8E1D4;
    --trp-rv-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;}
body.trp-dsg .trp-ota-wrap button, body.trp-dsg .trp-ota-sort {font-family: inherit;}
body.trp-dsg .trp-ota-wrap button:focus-visible, body.trp-dsg .trp-ota-sort:focus-visible {outline: 2px solid var(--trp-rv-brand); outline-offset: 2px;}
/* 스크린리더 전용: display:none / visibility:hidden 은 읽히지 않으므로 클립 기법을 쓴다 */
body.trp-dsg .trp-ota-sr {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
body.trp-dsg .trp-ota-sub {margin: -6px 0 16px; font-size: 14px; color: var(--trp-rv-muted);}
/* 별(크림슨 SVG) */
body.trp-dsg .trp-ota-stars {display: inline-flex; gap: 1px; vertical-align: -2px;}
body.trp-dsg .trp-ota-stars i {display: inline-block; width: 14px; height: 14px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237C1B28' d='M12 2l2.9 6.6 7.1.7-5.4 4.8 1.6 7L12 17.4 5.8 21l1.6-7L2 9.3l7.1-.7z'/%3E%3C/svg%3E") no-repeat center / contain;}
body.trp-dsg .trp-ota-stars i.e {opacity: .22;}
/* 플랫폼 로고: 외부 요청 없이 인라인(배경 SVG + 글자 칩)으로 그린다. 미등록 플랫폼은 data-l 머리글자 칩으로 폴백.
   칩은 role="img" + aria-label(플랫폼명)이라 머리글자는 화면에만 보인다 — 그래도 12px·대비 4.5 이상으로 그린다 */
body.trp-dsg .trp-ota-logo {flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background-color: #62605B; background-repeat: no-repeat; background-position: center; background-size: 18px 18px; font-size: 12px; font-weight: 700; color: #FFFFFF; line-height: 1;}
body.trp-dsg .trp-ota-logo::before {content: attr(data-l);}
body.trp-dsg .trp-ota-logo[data-p="GetYourGuide"]::before, body.trp-dsg .trp-ota-logo[data-p="Tripadvisor"]::before, body.trp-dsg .trp-ota-logo[data-p="Viator"]::before, body.trp-dsg .trp-ota-logo[data-p="Klook"]::before, body.trp-dsg .trp-ota-logo[data-p="Airbnb"]::before, body.trp-dsg .trp-ota-logo[data-p="Google"]::before {content: "";}   /* SVG 글리프가 있으면 머리글자 숨김 — 겹침 방지 */
body.trp-dsg .trp-ota-logo[data-p="GetYourGuide"] {background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FF5533'/%3E%3Cg transform='translate(6.22,4.56) scale(0.0393)'%3E%3Cpath fill='%23FFFFFF' d='M49.5 213.7v27.2c0 52 38.6 90.3 86.2 90.3 29.7 0 55.9-15 71.1-37.8V327h40V213.7H139.5v38.9h44.2c-4.2 20.6-22.8 36.1-44.7 36.1-24.7 0-45-19.2-45-47.8v-27.2zm22.2-13.9c13.3 0 23.9-10.3 23.9-23.9S85 152 71.7 152s-23.9 10.3-23.9 23.9 10.6 23.9 23.9 23.9m75.9-152c-55.3 0-98.1 36.7-98.1 90.3H94c0-27.8 23.1-47.8 53.4-47.8s53.4 20 53.4 47.8h44.5c-.2-53.6-42.7-90.3-97.7-90.3'/%3E%3C/g%3E%3C/svg%3E");}
body.trp-dsg .trp-ota-logo[data-p="Tripadvisor"] {background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2334E0A1'/%3E%3Cg transform='translate(5.04,5.04) scale(0.5800)'%3E%3Cpath fill='%23000A12' d='M12.006 4.295c-2.67 0-5.338.784-7.645 2.353H0l1.963 2.135a5.997 5.997 0 0 0 4.04 10.43 5.976 5.976 0 0 0 4.075-1.6L12 19.705l1.922-2.09a5.972 5.972 0 0 0 4.072 1.598 6 6 0 0 0 6-5.998 5.982 5.982 0 0 0-1.957-4.432L24 6.648h-4.35a13.573 13.573 0 0 0-7.644-2.353zM12 6.255c1.531 0 3.063.303 4.504.903C13.943 8.138 12 10.43 12 13.1c0-2.671-1.942-4.962-4.504-5.942A11.72 11.72 0 0 1 12 6.256zM6.002 9.157a4.059 4.059 0 1 1 0 8.118 4.059 4.059 0 0 1 0-8.118zm11.992.002a4.057 4.057 0 1 1 .003 8.115 4.057 4.057 0 0 1-.003-8.115zm-11.992 1.93a2.128 2.128 0 0 0 0 4.256 2.128 2.128 0 0 0 0-4.256zm11.992 0a2.128 2.128 0 0 0 0 4.256 2.128 2.128 0 0 0 0-4.256z'/%3E%3C/g%3E%3C/svg%3E");}
body.trp-dsg .trp-ota-logo[data-p="Viator"] {background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23008768'/%3E%3Cimage x='4.80' y='4.80' width='14.40' height='14.40' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAB80lEQVR42u2YzStEURjG7x80UoqykET5iAULU1ZSithMFrKTDU2SxsfCZhYWFpRkiDSZJgsLNlj5mERDIxY+wmBcz6lro5l733ec0Ts6T/2W9zn3Oe+5577nWJaRkZGRaNm2XUIhT+9GsAhuQBqcg1lQoevlg+DDpumI6R0Gjzm8rsGwjgDVIEUM8AQ6ib7rIOPhpyoS1BFi06ZrieDXC56Jfmpp1fw2QB1htr51B8o9/FYYE6LGHdNRhRhj0DkPrxObp1UdAVrAG3HAtIdXihlgW9eOtMMYdNrF54wZYE1XgCFGFRIuPhvMAJO6ApSCC+KgryCQw2fA2SIpugXNOv/KYcbMRV18togeoUK0FhlGFWpdfKIuz76DiUL1RguMKkQ8vAbBIUg6u9Ml2AX+QjZ3VeCeGEDNZCXBs8zx9f1VhxphVGFZYovdA16IAa60tceaQxwzltGIxACjjGW0L/W09kAM8AnaJQYYZ1RhT2IAH6O7VD/ANokh5p0lQlFcYgA/48emmrN6iSEOGMsoJDFAP+NjPpW6pSYYW2pAYoAAowpJqVXgnHe7JQaYYhx4+iQGqHe2Ss8OVfJtdpzwEQ9KDtCa75WLpBB7LrM/UwwBOpyDTLbL3yarGKQOMVkCxKxiEV62Sx3of9BgGRkZGf0rfQH+DnuK8XzHsgAAAABJRU5ErkJggg=='/%3E%3C/svg%3E");}
body.trp-dsg .trp-ota-logo[data-p="Klook"] {background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FF5722'/%3E%3Cg transform='translate(5.04,5.04) scale(0.5800)'%3E%3Cpath fill='%23FFFFFF' d='M4.8 0A4.79 4.79 0 0 0 0 4.8v14.4C0 21.86 2.14 24 4.8 24h14.4c2.66 0 4.8-2.14 4.8-4.8V4.8C24 2.14 21.86 0 19.2 0H4.8zM12 3.449v.001c4.242 0 7.833 1.904 7.833 6.17 0 2.932-3.86 7.815-6.164 10.164-.99 1.008-2.32 1.036-3.338 0-2.303-2.349-6.164-7.232-6.164-10.164 0-4.162 3.476-6.171 7.833-6.171zm3.54 2.155l-5.05 4.96 5.05 4.956a1.84 1.84 0 0 0 0-2.634v-.001l-2.366-2.323 2.366-2.323a1.84 1.84 0 0 0 0-2.635zm-7.349.144v9.772a1.86 1.86 0 0 0 1.868-1.852V7.602a1.86 1.86 0 0 0-1.866-1.854h-.002z'/%3E%3C/g%3E%3C/svg%3E");}
body.trp-dsg .trp-ota-logo[data-p="Airbnb"] {background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FF5A5F'/%3E%3Cg transform='translate(5.04,5.04) scale(0.5800)'%3E%3Cpath fill='%23FFFFFF' d='M12.001 18.275c-1.353-1.697-2.148-3.184-2.413-4.457-.263-1.027-.16-1.848.291-2.465.477-.71 1.188-1.056 2.121-1.056s1.643.345 2.12 1.063c.446.61.558 1.432.286 2.465-.291 1.298-1.085 2.785-2.412 4.458zm9.601 1.14c-.185 1.246-1.034 2.28-2.2 2.783-2.253.98-4.483-.583-6.392-2.704 3.157-3.951 3.74-7.028 2.385-9.018-.795-1.14-1.933-1.695-3.394-1.695-2.944 0-4.563 2.49-3.927 5.382.37 1.565 1.352 3.343 2.917 5.332-.98 1.085-1.91 1.856-2.732 2.333-.636.344-1.245.558-1.828.609-2.679.399-4.778-2.2-3.825-4.88.132-.345.395-.98.845-1.961l.025-.053c1.464-3.178 3.242-6.79 5.285-10.795l.053-.132.58-1.116c.45-.822.635-1.19 1.351-1.643.346-.21.77-.315 1.246-.315.954 0 1.698.558 2.016 1.007.158.239.345.557.582.953l.558 1.089.08.159c2.041 4.004 3.821 7.608 5.279 10.794l.026.025.533 1.22.318.764c.243.613.294 1.222.213 1.858zm1.22-2.39c-.186-.583-.505-1.271-.9-2.094v-.03c-1.889-4.006-3.642-7.608-5.307-10.844l-.111-.163C15.317 1.461 14.468 0 12.001 0c-2.44 0-3.476 1.695-4.535 3.898l-.081.16c-1.669 3.236-3.421 6.843-5.303 10.847v.053l-.559 1.22c-.21.504-.317.768-.345.847C-.172 20.74 2.611 24 5.98 24c.027 0 .132 0 .265-.027h.372c1.75-.213 3.554-1.325 5.384-3.317 1.829 1.989 3.635 3.104 5.382 3.317h.372c.133.027.239.027.265.027 3.37.003 6.152-3.261 4.802-6.975z'/%3E%3C/g%3E%3C/svg%3E");}
body.trp-dsg .trp-ota-logo[data-p="Google"] {background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%234285F4'/%3E%3Cg transform='translate(5.04,5.04) scale(0.5800)'%3E%3Cpath fill='%23FFFFFF' d='M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z'/%3E%3C/g%3E%3C/svg%3E");}
body.trp-dsg .trp-ota-logo[data-p="Civitatis"] {background-color: #F28C00; color: #20201E;}   /* 주황 위 흰 글자 2.5:1 → 잉크 6.6:1 */
body.trp-dsg .trp-ota-tab .trp-ota-logo {width: 16px; height: 16px; background-size: 16px 16px;}
body.trp-dsg .trp-ota-logo[data-p="Tripper Korea"] {background-color: #7C1B28;}
/* 리뷰 카드 본문: 5줄 클램프, 260자 초과만 Read more(기존 규칙 유지) */
body.trp-dsg .trp-ota-txt {font-size: 15px; line-height: 1.6; color: var(--trp-rv-text); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; word-break: break-word;}
body.trp-dsg .trp-ota-card.open .trp-ota-txt {-webkit-line-clamp: unset; display: block;}
body.trp-dsg .trp-ota-more {align-self: flex-start; min-height: 28px; background: none; border: 0; padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--trp-rv-link); cursor: pointer; text-decoration: underline; text-underline-offset: 4px;}
body.trp-dsg .trp-ota-more:hover, body.trp-dsg .trp-ota-hlmore:hover, body.trp-dsg .trp-ota-rp-t:hover {color: var(--trp-rv-brand-deep);}

/* 요약 줄: 평균(세리프 큰 숫자)·별·건수는 한 번만(탭마다 반복 제거). 건수는 MVP 사실 줄처럼 대문자·넓은 자간 라벨 */
body.trp-dsg .trp-ota-sum {display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px;}
body.trp-dsg .trp-ota-sum:empty {display: none;}
body.trp-dsg .trp-ota-sum b {font-family: var(--trp-rv-serif); font-size: 40px; line-height: 1; font-weight: 400; letter-spacing: -.02em; color: var(--trp-rv-ink);}
body.trp-dsg .trp-ota-sum .trp-ota-stars i {width: 18px; height: 18px;}
body.trp-dsg .trp-ota-sum-t {font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--trp-rv-muted);}

/* 플랫폼 탭: 로고 + 이름 + 건수, 모서리 2px 상자. PC 는 줄바꿈(마우스로 가로 스크롤 강요 금지), 모바일은 한 줄 가로 스크롤.
   선택 = 크림슨 테두리 + 옅은 크림슨 바탕 + 아래 3px 크림슨 막대(밑줄형 표시를 상자 안에 넣어 2줄로 흘러도 깨지지 않게) */
body.trp-dsg .trp-ota-tabs {display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 16px; margin-bottom: 20px; border-bottom: 1px solid var(--trp-rv-line);}
body.trp-dsg .trp-ota-tab {flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 1px solid var(--trp-rv-line); border-radius: 2px; background: var(--trp-rv-paper); font-size: 14px; color: var(--trp-rv-ink); cursor: pointer; white-space: nowrap; position: static;}
body.trp-dsg .trp-ota-tab:hover:not(.on) {background: var(--trp-rv-ivory-soft);}
body.trp-dsg .trp-ota-tab.on {background: var(--trp-rv-tint6); border-color: var(--trp-rv-brand); color: var(--trp-rv-brand); box-shadow: inset 0 -3px 0 var(--trp-rv-brand);}
body.trp-dsg .trp-ota-tab .trp-ota-tab-name {font-weight: 600; color: inherit;}
body.trp-dsg .trp-ota-tab .trp-ota-tab-n {font-size: 13px; color: var(--trp-rv-muted); font-variant-numeric: tabular-nums;}
body.trp-dsg .trp-ota-tab.on .trp-ota-tab-n {color: var(--trp-rv-brand);}

/* 하이라이트: 옅은 아이보리 카드 + 위 3px 크림슨 막대(MVP 결정 카드), 세리프 인용 본문(정체), 5줄 클램프 + 펼치기,
   푸터는 카드 바닥에 붙여 3장 높이 통일 */
body.trp-dsg .trp-ota-hl {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; align-items: stretch;}
body.trp-dsg .trp-ota-hl:empty {display: none;}
body.trp-dsg .trp-ota-hlc {position: static; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 18px 20px 16px; border: 1px solid var(--trp-rv-line-soft); border-top: 3px solid var(--trp-rv-brand); border-radius: 2px; background: var(--trp-rv-ivory-soft); box-shadow: none; min-width: 0;}
body.trp-dsg .trp-ota-hlq {position: static; display: block; height: 14px; font-family: var(--trp-rv-serif); font-size: 30px; line-height: .6; color: var(--trp-rv-brand); opacity: 1;}
body.trp-dsg .trp-ota-hlt {position: static; margin: 0; font-family: var(--trp-rv-serif); font-size: 16px; line-height: 1.6; color: var(--trp-rv-ink); font-style: normal; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;}
body.trp-dsg .trp-ota-hlc.open .trp-ota-hlt {-webkit-line-clamp: unset; display: block;}
body.trp-dsg .trp-ota-hlmore {align-self: flex-start; min-height: 28px; margin-top: -4px; background: none; border: 0; padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--trp-rv-link); cursor: pointer; text-decoration: underline; text-underline-offset: 4px;}
body.trp-dsg .trp-ota-hlmore[hidden] {display: none;}
body.trp-dsg .trp-ota-hlf {margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding-top: 12px; border-top: 1px solid var(--trp-rv-line); font-size: 13px; color: var(--trp-rv-muted);}
body.trp-dsg .trp-ota-hlf .trp-ota-logo {flex: none;}
body.trp-dsg .trp-ota-hln {font-weight: 600; color: var(--trp-rv-ink); font-style: normal; white-space: nowrap;}

/* 컨트롤 상자(1px 선, 그림자 없음): 분포(왼쪽, 행 28px) + 칩·정렬(오른쪽, 36px) 을 같은 윗선에 */
body.trp-dsg .trp-ota-ctl {display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 16px 32px; align-items: start; justify-content: initial; padding: 16px 18px; margin-bottom: 14px; border: 1px solid var(--trp-rv-line); border-radius: 2px; background: var(--trp-rv-paper);}
body.trp-dsg .trp-ota-dtgl {display: none;}
body.trp-dsg .trp-ota-dist {display: flex; flex-direction: column; gap: 2px; min-width: 0;}
body.trp-dsg .trp-ota-drow {display: flex; align-items: center; gap: 10px; width: 100%; height: 28px; padding: 0 8px; border: 0; border-radius: 2px; background: none; cursor: pointer; font-size: 13px; color: var(--trp-rv-ink); text-align: left;}
body.trp-dsg .trp-ota-drow:hover {background: var(--trp-rv-ivory-soft);}
body.trp-dsg .trp-ota-drow.on {background: var(--trp-rv-tint6); box-shadow: inset 3px 0 0 var(--trp-rv-brand);}
body.trp-dsg .trp-ota-drow[disabled] {opacity: .55; cursor: default;}
body.trp-dsg .trp-ota-drow[disabled]:hover {background: none;}
body.trp-dsg .trp-ota-dlb {flex: none; width: 28px; color: var(--trp-rv-ink); font-variant-numeric: tabular-nums;}
body.trp-dsg .trp-ota-dbar {flex: 1; height: 6px; border-radius: 0; background: var(--trp-rv-line-soft); overflow: hidden;}
body.trp-dsg .trp-ota-dfill {display: block; height: 100%; min-width: 2px; border-radius: 0; background: var(--trp-rv-brand);}
body.trp-dsg .trp-ota-dfill[style*="width:0%"] {min-width: 0;}
body.trp-dsg .trp-ota-dn {flex: none; width: 40px; text-align: right; color: var(--trp-rv-muted); font-variant-numeric: tabular-nums;}
body.trp-dsg .trp-ota-dpct {flex: none; width: 38px; text-align: right; font-size: 12px; color: var(--trp-rv-muted); font-variant-numeric: tabular-nums;}
body.trp-dsg .trp-ota-ctl-r {display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: 0;}
body.trp-dsg .trp-ota-chips {display: flex; flex-wrap: wrap; gap: 8px;}
body.trp-dsg .trp-ota-chip {display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--trp-rv-line); border-radius: 2px; background: var(--trp-rv-paper); font-size: 14px; color: var(--trp-rv-ink); cursor: pointer; white-space: nowrap;}
body.trp-dsg .trp-ota-chip:hover:not(.on) {background: var(--trp-rv-ivory-soft); color: var(--trp-rv-ink); border-color: var(--trp-rv-line);}
body.trp-dsg .trp-ota-chip.on {background: var(--trp-rv-tint6); border-color: var(--trp-rv-brand); color: var(--trp-rv-brand); font-weight: 600;}
body.trp-dsg .trp-ota-chip-n {margin-left: 6px; font-size: 12px; color: var(--trp-rv-muted); opacity: 1; font-variant-numeric: tabular-nums;}
body.trp-dsg .trp-ota-chip.on .trp-ota-chip-n {color: var(--trp-rv-brand);}
body.trp-dsg .trp-ota-sortwrap {display: inline-flex; align-items: center; gap: 8px; margin-left: 8px;}
body.trp-dsg .trp-ota-sortlb {font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--trp-rv-muted);}
body.trp-dsg .trp-ota-sort {height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--trp-rv-line); border-radius: 2px; background: var(--trp-rv-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2362605B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 7px; font-size: 14px; color: var(--trp-rv-ink); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

/* 보이는 건수 줄(스크린리더용 aria-live .trp-ota-sr 와 별개) */
body.trp-dsg .trp-ota-count {margin: 0 0 12px; font-size: 13px; color: var(--trp-rv-muted);}
body.trp-dsg .trp-ota-count:empty {display: none;}
body.trp-dsg .trp-ota-count b {color: var(--trp-rv-ink); font-weight: 600;}
body.trp-dsg .trp-ota-empty {padding: 26px 0; color: var(--trp-rv-muted); font-size: 14px; text-align: center;}

/* 리뷰 카드: 2열(한 줄 약 60자), 행 높이 정렬. 종이 바탕 + 1px 선 + 모서리 2px, 그림자 없음 */
body.trp-dsg .trp-ota-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch;}
body.trp-dsg .trp-ota-card {display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; padding: 18px 20px; border: 1px solid var(--trp-rv-line); border-radius: 2px; background: var(--trp-rv-paper); box-shadow: none;}
body.trp-dsg .trp-ota-card-head {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
body.trp-dsg .trp-ota-who {display: flex; align-items: center; gap: 8px; min-width: 0;}
body.trp-dsg .trp-ota-name {font-weight: 600; font-size: 15px; color: var(--trp-rv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
body.trp-dsg .trp-ota-meta {font-size: 13px; color: var(--trp-rv-muted); white-space: nowrap;}

/* 운영자 답글(읽기 전용): 리뷰 JSON 에 rp(본문)가 있을 때만 JS 가 그린다. 왼쪽 크림슨 2px 선 + 아이보리 바탕. 본문 2줄 접힘 → 버튼으로 펼침 */
body.trp-dsg .trp-ota-rp {margin-top: 4px; padding: 10px 12px 10px 14px; border-left: 2px solid var(--trp-rv-brand); border-radius: 0 2px 2px 0; background: var(--trp-rv-ivory);}
body.trp-dsg .trp-ota-rp-h {display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--trp-rv-muted);}
body.trp-dsg .trp-ota-rp-h b {color: var(--trp-rv-ink); font-weight: 600;}
body.trp-dsg .trp-ota-rp-b {margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--trp-rv-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; word-break: break-word;}
body.trp-dsg .trp-ota-rp.open .trp-ota-rp-b {-webkit-line-clamp: unset; display: block;}
body.trp-dsg .trp-ota-rp-t {min-height: 28px; margin-top: 4px; padding: 4px 0; background: none; border: 0; font-size: 13px; font-weight: 600; color: var(--trp-rv-link); cursor: pointer; text-decoration: underline; text-underline-offset: 4px;}

/* 페이저: 직각 상자. 현재 페이지 = 크림슨 테두리 + 옅은 크림슨 바탕 + 크림슨 굵은 글자(9.1:1) */
body.trp-dsg .trp-ota-pager {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 22px;}
body.trp-dsg .trp-ota-pg {min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--trp-rv-line); border-radius: 2px; background: var(--trp-rv-paper); font-size: 14px; color: var(--trp-rv-ink); cursor: pointer;}
body.trp-dsg .trp-ota-pg:hover:not(:disabled):not(.on) {background: var(--trp-rv-ivory-soft); border-color: var(--trp-rv-line); color: var(--trp-rv-ink);}
body.trp-dsg .trp-ota-pg.on {background: var(--trp-rv-tint6); border-color: var(--trp-rv-brand); color: var(--trp-rv-brand); font-weight: 700; cursor: default;}
body.trp-dsg .trp-ota-pg:disabled {opacity: .35; cursor: default;}
body.trp-dsg .trp-ota-pg-gap {min-width: 24px; text-align: center; color: var(--trp-rv-muted); font-size: 14px;}

/* 태블릿 폭: 하이라이트 3열이 좁아지면 2열로. 3번째 카드를 숨기지 않고 다음 줄로 흘린다 */
@media screen and (max-width: 1200px) {
    body.trp-dsg .trp-ota-hl {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media screen and (max-width: 768px) {
    body.trp-dsg .trp-ota-sum b {font-size: 32px;}
    /* 탭: 줄바꿈 대신 한 줄 가로 스크롤(8줄 세로 스택 금지) + 스냅. 화면 끝까지 밀어 다음 탭이 엿보이게 */
    body.trp-dsg .trp-ota-tabs {flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
                                margin: 0 -16px 16px; padding: 2px 16px 12px; scroll-padding-inline: 16px;}
    body.trp-dsg .trp-ota-tabs::-webkit-scrollbar {display: none;}
    body.trp-dsg .trp-ota-tab {height: 44px; scroll-snap-align: start;}
    /* 하이라이트: 숨기지 않고 가로 스와이프(scroll-snap). 다음 카드가 44px 엿보여 '더 있다'를 알린다 */
    body.trp-dsg .trp-ota-hl {grid-template-columns: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
                              margin: 0 -16px 20px; padding: 0 16px 4px; scroll-padding-inline: 16px; scrollbar-width: none;}
    body.trp-dsg .trp-ota-hl::-webkit-scrollbar {display: none;}
    body.trp-dsg .trp-ota-hlc {flex: 0 0 calc(100% - 44px); scroll-snap-align: start;}
    body.trp-dsg .trp-ota-hlmore {min-height: 44px;}
    /* 컨트롤: 1열. 별점 분포는 기본 접힘(섹션 세로 길이 절약) — 버튼으로 펼친다 */
    body.trp-dsg .trp-ota-ctl {grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 12px 14px;}
    body.trp-dsg .trp-ota-dtgl {display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--trp-rv-line); border-radius: 2px; background: var(--trp-rv-paper); font-size: 14px; font-weight: 600; color: var(--trp-rv-ink); cursor: pointer; text-align: left;}
    body.trp-dsg .trp-ota-dtgl-v {margin-left: auto; font-weight: 400; color: var(--trp-rv-muted);}
    body.trp-dsg .trp-ota-dtgl::after {content: ""; flex: none; width: 10px; height: 7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2362605B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;}
    body.trp-dsg .trp-ota-dtgl[aria-expanded="true"]::after {transform: rotate(180deg);}
    body.trp-dsg .trp-ota-ctl:not(.dopen) .trp-ota-dist {display: none;}
    body.trp-dsg .trp-ota-drow {height: 44px;}
    body.trp-dsg .trp-ota-ctl-r {justify-content: flex-start;}
    body.trp-dsg .trp-ota-chip {height: 44px;}
    body.trp-dsg .trp-ota-sortwrap {margin-left: 0; width: 100%;}
    body.trp-dsg .trp-ota-sort {flex: 1; height: 44px;}
    body.trp-dsg .trp-ota-list {grid-template-columns: minmax(0, 1fr); gap: 12px;}
    body.trp-dsg .trp-ota-more, body.trp-dsg .trp-ota-rp-t {min-height: 44px;}
    body.trp-dsg .trp-ota-pg {min-width: 44px; height: 44px;}
}