/* CMS 이미지 OCR 번역 오버레이 */ /* * .ocr-wrap 의 적용 형태가 두 가지다 — JS buildWrap() 참조. * (1) 기존 부모(예: div.thumb) 를 그대로 재활용 — 슬릭/스와이퍼 캐러셀이 자식 DOM * 위치를 추적하므로 새 span 으로 감싸면 슬라이드 레이아웃이 깨진다. 이 케이스에서는 * position 기준만 필요하고 display/sizing 은 기존 부모 스타일을 그대로 둬야 한다. * (2) 부모가 비정상 구조라 fallback 으로 새 을 생성한 경우 — span 은 기본 inline * 이므로 명시적으로 inline-block + max-width 가 필요하다. */ .ocr-wrap { position: relative; } span.ocr-wrap { display: inline-block; max-width: 100%; } span.ocr-wrap > img { display: block; max-width: 100%; height: auto; } .ocr-overlay { position: absolute; box-sizing: border-box; background: rgba(255, 255, 255, 0.92); color: #111; padding: 2px 4px; border-radius: 3px; line-height: 1.2; /* 박스는 번역문 길이에 맞춰 늘어난다 — 원본 텍스트 박스 크기는 JS 에서 min-width/ min-height 로만 적용한다. 과거 고정폭 + overflow:hidden + ellipsis 조합은 긴 번역문 (예: 양평 → Yangpyeong)을 'Y…' 로 잘라버렸다. */ width: auto; height: auto; overflow: visible; white-space: nowrap; font-family: Arial, "Malgun Gothic", sans-serif; cursor: default; /* Global(Google 위젯)이 로 전환해도 박스 내부 텍스트 방향이 페이지 dir 을 따라가지 않도록 격리한다. */ unicode-bidi: isolate; } /* 스켈레톤 뱃지·토글 텍스트도 위젯의 RTL 전환 영향에서 격리 */ .ocr-skeleton-badge, .ocr-toggle { unicode-bidi: isolate; } /* 마우스 오버 시 전체 번역문을 팝업 툴팁으로 */ .ocr-overlay::after { content: attr(data-text); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) scale(0.96); transform-origin: bottom center; background: rgba(20, 20, 20, 0.95); color: #fff; font-size: 12px; line-height: 1.35; padding: 6px 10px; border-radius: 6px; white-space: normal; min-width: 120px; max-width: 320px; width: max-content; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.12s ease, transform 0.12s ease; z-index: 20; box-shadow: 0 4px 12px rgba(0,0,0,0.25); } .ocr-overlay::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 1px); transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(20, 20, 20, 0.95); pointer-events: none; opacity: 0; transition: opacity 0.12s ease; z-index: 20; } .ocr-overlay:hover::after, .ocr-overlay:hover::before, .ocr-overlay:focus::after, .ocr-overlay:focus::before { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); } /* 로딩 스켈레톤: 번역 API 호출 중에만 표시 */ .ocr-skeleton { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 70% ); background-size: 200% 100%; animation: ocr-shimmer 1.4s linear infinite; } .ocr-skeleton-badge { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 999px; font-family: Arial, "Malgun Gothic", sans-serif; display: inline-flex; align-items: center; gap: 6px; } .ocr-skeleton-badge::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: ocr-spin 0.8s linear infinite; } /* 번역 on/off 토글 버튼 (이미지 우상단) */ .ocr-toggle { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 30; transition: background 0.15s ease, transform 0.1s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.25); opacity: 0; } .ocr-wrap:hover .ocr-toggle, .ocr-toggle:focus, .ocr-toggle.ocr-toggle--off { opacity: 1; } .ocr-toggle:hover { background: rgba(0, 0, 0, 0.8); } .ocr-toggle:active { transform: scale(0.94); } .ocr-toggle svg { width: 16px; height: 16px; display: block; fill: currentColor; } .ocr-toggle--off { background: rgba(255,255,255,0.9); color: #222; } /* 토글이 OFF 상태: 오버레이 + 툴팁 숨김 */ .ocr-wrap.ocr-wrap--off .ocr-overlay, .ocr-wrap.ocr-wrap--off .ocr-skeleton { display: none !important; } @keyframes ocr-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes ocr-spin { to { transform: rotate(360deg); } }