/*
* 활용사례(use-case) 카드형 페이지 공통 스타일.
* 마케팅 시안(.dc.html)을 옮긴 페이지들이 공유하는 구조/인터랙션 CSS만 담는다.
* 폰트 크기·굵기·여백은 여기서 정의하지 않는다 — base.css/layout.css의
* title/fs-18/fs-20/fs-48/fw-*/pdt-*/mgb-* 등 기존 유틸리티 클래스를 사용한다.
* 사용 페이지: WEB-INF/jsp/pages/examples/batch-job-test.jsp, user-history-test.jsp
*
* 주의: 이 스타일시트가 로 로드될 때 이유 불명으로 텍스트상 첫 번째 규칙이
* 파싱 과정에서 누락되는 현상이 확인되어(내용과 무관하게 위치 1이 사라짐),
* 아래 :root{} 더미 규칙을 희생양으로 맨 앞에 둔다. 지우지 말 것.
*/
:root {}
.uc-case, .uc-case * { letter-spacing: normal !important; }
/* 한글은 공백에서만 줄바꿈한다. base.css 의 body{word-break:break-word} 때문에
'남습/니다.' 처럼 단어 중간이 끊기던 것을 막는다(활용사례 페이지 한정). */
.uc-case, .uc-case * { word-break: keep-all; }
.uc-case { background: #f8f9fb; color: #0a1317; padding-top: 100px; }
.uc-case .container { overflow: visible; }
.uc-case a { color: #0457cb; text-decoration: none; }
.uc-case a:hover { color: #0064e0; }
.uc-case .ow-card-hover { transition: box-shadow 200ms cubic-bezier(.2,0,0,1), border-color 200ms cubic-bezier(.2,0,0,1), transform 200ms cubic-bezier(.2,0,0,1); }
.uc-case .ow-card-hover:hover { border-color: #0064e0 !important; box-shadow: rgba(20,22,26,.10) 0 10px 30px; transform: translateY(-2px); }
.uc-case .ow-cta-btn { transition: transform 120ms ease-out, background 150ms ease-out; }
.uc-case .ow-cta-btn:active { transform: scale(.98); }
.uc-case .ow-post-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #0a1317; transition: color 150ms ease-out; }
.uc-case .ow-post-link:hover { color: #0064e0 !important; }
.uc-case .uc-guide-btn { transition: background 150ms ease-out, color 150ms ease-out, transform 120ms ease-out; }
.uc-case .uc-guide-btn:hover { background: #0064e0 !important; color: #fff !important; border-color: #0064e0 !important; }
.uc-case .uc-guide-btn:active { transform: scale(.98); }
.uc-case .uc-modal-x { flex: none; width: 40px; height: 40px; border-radius: 9999px; border: none; background: #f1f4f7; color: #5d6c7b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 150ms ease-out; }
.uc-case .uc-modal-x:hover { background: #e4e8ee !important; }
.uc-case .uc-modal-overlay { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(10,19,23,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); align-items: center; justify-content: center; padding: 40px; animation: owFadeIn 180ms ease-out; }
.uc-case .uc-cards3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.uc-case .uc-cta-box { position: relative; overflow: hidden; border-radius: 32px; background: linear-gradient(135deg,#0091ff 0%,#0064e0 60%,#0457cb 100%); color: #fff; padding: 32px 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.uc-case .uc-cta-dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(135deg, transparent 40%, black); mask-image: linear-gradient(135deg, transparent 40%, black); pointer-events: none; }
.uc-case .uc-cta-actions { position: relative; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.uc-case .uc-cta-section { padding: 24px 0 48px; }
.uc-case .uc-cta-box .fs-18 { color: rgba(255,255,255,.88); max-width: none; }
.uc-case .uc-cta-box .uc-eyebrow { color: #fff; opacity: .85; }
.uc-case .uc-cta-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 32px; border-radius: 100px; background: #fff; color: #0a1317; font-size: 15px; font-weight: 700; }
.uc-case .uc-hero-intro { max-width: 520px; }
/* 영상 보기 버튼 영역. 현재 두 페이지 모두 영상 업로드 전이라 JSP에서 주석 처리돼 있다.
미사용처럼 보여도 지우지 말 것 — 영상 등록 시 주석만 풀면 되도록 남겨 둔다(.uc-video-btn 도 동일). */
.uc-case .uc-hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.uc-case .uc-diff-intro { color: #1c1e21; }
/* ---- 히어로 브레드크럼 ---- */
.uc-case .uc-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #8595a4; }
.uc-case .uc-breadcrumb a { color: #8595a4; }
.uc-case .uc-crumb-sep { color: #ced0d4; }
.uc-case .uc-crumb-current { color: #F29821; }
/* ---- 섹션 공통 ---- */
.uc-case .uc-eyebrow { font-size: 13px; font-weight: 700; text-transform: uppercase; color: #0064e0; }
/* 헤딩류 기본 잉크색 — 두 페이지 전체에서 가장 많이 반복되는 단일 색상값 */
.uc-case .uc-ink { color: #0a1317; }
.uc-case .uc-tip-pill .uc-ico { margin-top: 1px; }
.uc-case .uc-cta-content { position: relative; }
.uc-case .uc-section { padding: 32px 0; }
.uc-case .uc-section-white { background: #fff; padding: 32px 0; }
/* fs-18 본문 단락의 기본 줄간격·색상 — 색상이 다른 곳만 인라인으로 override */
.uc-case .fs-18 { line-height: 1.3; color: #5d6c7b; }
.uc-case strong.uc-strong { color: #1c1e21; font-weight: 700; }
.uc-case strong.uc-strong-800 { color: #0a1317; font-weight: 800; }
/* ---- 히어로(두 페이지 공통 구조) ---- */
.uc-case .uc-hero-section { background: #fff; padding: 72px 0 88px; }
/* 히어로 하단 여백을 일반 섹션과 같은 32px로 낮춘다(아래 섹션과의 간격 88+32=120px → 32+32=64px).
영상 보기 버튼처럼 하단 CTA가 없어 아래쪽이 허전해 보일 때 사용한다. */
.uc-case .uc-hero-section--tight { padding-bottom: 32px; }
/* gap 48px: 64px였을 때 좌측 칼럼이 593px이라 긴 제목의 첫 줄(48px에서 597px)이 4px 모자라
단어 중간에서 접혔다. 48px로 줄이면 좌측이 601px가 되어 폰트 크기를 건드리지 않고 해결된다.
(제목만 47px로 낮추는 방식은 사이트 공통 fs-48 규칙에서 이 페이지만 예외가 되므로 쓰지 않는다.) */
.uc-case .uc-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
/* 텍스트 열은 항상 위에서 시작한다.
align-items:center는 낮은 쪽을 가운데로 내리는데, 히어로 캡처가 세로로 긴 페이지(SQL Viewer는
비율 1.21이라 프레임이 503px)에서는 텍스트가 높이를 정하지 못해 제목이 68px 아래로 밀렸다.
대부분의 페이지는 텍스트 열이 더 높아 이 규칙이 아무 영향을 주지 않는다. */
.uc-case .uc-hero-grid > div:first-child { align-self: start; }
.uc-case .uc-tag-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.uc-case .uc-hero-shot { border-radius: 20px; background: #12181d; padding: 12px; box-shadow: rgba(20,22,26,.28) 0 24px 60px; overflow: hidden; }
.uc-case .uc-hero-shot-topbar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 12px; }
.uc-case .uc-hero-shot-title { margin-left: 10px; color: rgba(255,255,255,.55); font-size: 12px; font-weight: 600; }
.uc-case .uc-mac-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.uc-case .uc-mac-dot--red { background: #ff5f57; }
.uc-case .uc-mac-dot--yellow { background: #febc2e; }
.uc-case .uc-mac-dot--green { background: #28c840; }
/* 히어로 질문형 H2(파란 강조) / "영상 보기" 주황 알약 버튼 */
.uc-case .uc-hero-question { color: #1077C5; }
.uc-case .uc-video-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 100px; color: #fff; font-size: 14px; font-weight: 700; background-color: #F29821; }
/* 히어로 스크린샷 프레임. OWLens 화면 캡처는 대체로 1917x862(약 2.22:1)라
이를 기본값으로 두고, 비율이 다른 캡처를 쓸 때만 style="aspect-ratio:W/H"로 덮어쓴다. */
.uc-case .uc-hero-shot-frame { position: relative; width: 100%; aspect-ratio: 1917/862; border-radius: 12px; overflow: hidden; background: #0a1317; }
.uc-case .uc-img-contain { display: block; width: 100%; height: 100%; object-fit: contain; }
/* ---- 히어로 태그 pill / 역할별 가치 카드의 다크 배지 ---- */
.uc-case .uc-tag-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 100px; background: #f1f4f7; color: #5d6c7b; font-size: 13px; font-weight: 700; }
.uc-case .uc-role-badge { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 100px; background: #0a1317; color: #fff; font-size: 16px; font-weight: 700; }
.uc-case .uc-role-card { background: #fff; border: 1px solid #dee3e9; border-radius: 16px; padding: 26px 40px; }
/* ---- Solution 단계(번호 원 + 아이콘행 + 이미지 프레임) ---- */
/* 각 행의 border-top이 단계 사이 구분선 역할을 한다. 마지막 행에는 하단 보더를 두지 않는다. */
.uc-case .uc-sol-row { display: grid; grid-template-columns: auto 1fr; gap: 28px; padding: 32px 0; border-top: 1px solid #dee3e9; }
.uc-case .uc-num-badge-col { display: flex; align-items: flex-start; gap: 20px; }
.uc-case .uc-num-badge { flex: none; width: 52px; height: 52px; border-radius: 9999px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; background-color: #F29821; }
.uc-case .uc-icon-row { display: flex; align-items: center; gap: 10px; }
.uc-case .uc-img-frame { border-radius: 14px; overflow: hidden; border: 1px solid #dee3e9; background: #0a1317; }
.uc-case .uc-img-frame-full { max-width: 1000px; margin: 22px auto 0; }
.uc-case .uc-img-frame img { display: block; width: 100%; height: auto; }
.uc-case .uc-img-caption { margin: 10px 2px 0; font-size: 13px; color: #8595a4; text-align: center; }
.uc-case .uc-flex-col { display: flex; flex-direction: column; }
/* 나란히 놓인 두 이미지는 높이를 맞춰야 하므로 쌍 단위로 하나의 비율을 쓴다.
자주 쓰는 두 형태를 기본값/변형으로 두고, 둘 다 아니면 컨테이너에
style="--uc-pair-ratio:W/H"로 덮어쓴다.
기본 : 대화상자·설정 화면처럼 세로가 있는 캡처
--wide : 목록·타임라인처럼 가로로 긴 캡처 */
.uc-case .uc-imgpair { --uc-pair-ratio: 770/525; max-width: 1000px; margin: 22px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.uc-case .uc-imgpair--wide { --uc-pair-ratio: 790/230; }
.uc-case .uc-imgpair .uc-img-frame { flex: 1; aspect-ratio: var(--uc-pair-ratio); }
/* 모달을 여는 안내 버튼. batch-job 원안의 알약형(높이 48px, 테두리 1.5px)을 두 페이지 공통으로 쓴다.
원안은 height 고정이었으나 좁은 화면에서 글자가 줄바꿈되면 넘치므로 min-height로 두었다
(한 줄일 때는 48px 그대로라 데스크톱 렌더링은 원안과 동일하다). */
.uc-case .uc-guide-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; min-height: 48px; padding: 6px 24px; border: 1.5px solid #0064e0; background: #eaf2ff; border-radius: 100px; font-size: 15px; font-weight: 700; color: #0457cb; cursor: pointer; }
/* ---- 안내/팁 pill(밝은 파랑) — 여러 모달에서 공용 ---- */
.uc-case .uc-tip-pill { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 16px 20px; background: #eaf2ff; border-radius: 100px; }
/* Solution 단계 아래 붙는 보조 설명 pill(내용 폭만큼만 차지) */
.uc-case .uc-note-pill { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 8px 16px; background: #eaf2ff; border-radius: 100px; font-size: 14px; font-weight: 500; color: #5d6c7b; }
.uc-case .uc-note-pill .uc-ico { color: #0064e0; }
/* ---- Problem 상세 카드(두 페이지 동일 컴포넌트로 통일: 원형 아이콘 배지 + 하단 보더 행) ---- */
.uc-case .uc-problem-card { background: #fff; border: 1px solid #dee3e9; border-radius: 16px; margin-top: 36px; padding: 4px 24px; }
.uc-case .uc-problem-row { display: flex; gap: 16px; padding: 17px 0; border-bottom: 1px solid #eef1f4; }
.uc-case .uc-problem-row:last-child { border-bottom: none; }
.uc-case .uc-problem-icon { flex: none; width: 36px; height: 36px; border-radius: 9999px; background: #f1f4f7; display: inline-flex; align-items: center; justify-content: center; }
.uc-case .uc-problem-icon--danger { color: #e41e3f; }
.uc-case .uc-problem-icon--warn { color: #f2a918; }
.uc-case .uc-problem-icon--info { color: #0064e0; }
/* ---- batch-job 모달: 감시 조건 체크박스 행 ---- */
.uc-case .uc-cond-row { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid #dee3e9; border-radius: 14px; padding: 16px 20px; }
.uc-case .uc-cond-row--split { justify-content: space-between; gap: 14px; }
.uc-case .uc-cond-row-main { display: flex; align-items: flex-start; gap: 12px; }
.uc-case .uc-checkbox-square { flex: none; margin-top: 1px; width: 22px; height: 22px; border-radius: 6px; background: #fff; border: 1.5px solid #ced0d4; }
.uc-case .uc-cond-title { font-size: 15px; font-weight: 700; color: #0a1317; }
.uc-case .uc-cond-desc { margin: 5px 0 0; font-size: 13px; line-height: 1.3; color: #5d6c7b; }
.uc-case .uc-time-box { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 32px; border-radius: 8px; border: 1px solid #dee3e9; background: #f8f9fb; font-size: 13px; font-weight: 600; color: #8595a4; }
.uc-case .uc-time-sep { color: #ced0d4; font-weight: 700; }
.uc-case .uc-text-blue { color: #0064e0; }
/* 제목 앞머리를 주황으로 떼어 강조할 때(넓게, / 좁게, / 깊게,) — 굵기는 제목을 따른다.
uc-accent-orange 는 800 굵기가 함께 붙으므로 굵기까지 바꾸고 싶을 때만 쓴다. */
.uc-case .uc-text-orange { color: #F29821; }
.uc-case .uc-channel-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: 100px; background: #eaf2ff; color: #0064e0; font-size: 13px; font-weight: 700; }
/* ---- user-history 전용: 감사인 질문 콜아웃 박스 / 모달 인사이트 카드 ---- */
.uc-case .uc-callout-card { background: #fff; border: 1px solid #d8e4f2; border-radius: 12px; padding: 13px 20px; }
.uc-case .uc-callout-label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #0f4c8a; }
.uc-case .uc-callout-value { margin-top: 7px; font-size: 15px; color: #5d6c7b; line-height: 1.5; }
.uc-case .uc-modal-insight-card { background: #fff; border: 1px solid #dee3e9; border-radius: 14px; padding: 18px 20px; }
.uc-case .uc-modal-insight-title { font-size: 15px; font-weight: 800; color: #0457cb; }
.uc-case .uc-modal-insight-desc { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: #5d6c7b; }
/* ---- 비교표(SAP 표준 vs OWLens) ---- */
.uc-case .uc-cmp-scroll { max-width: 960px; margin: 0 auto; }
.uc-case .uc-cmp-table { border: 1px solid #dee3e9; border-radius: 16px; overflow: hidden; }
/* 열 비율은 시안마다 달랐지만(0.55~2fr) 여기서 하나로 맞춘다.
10개 페이지의 모든 셀이 한 줄에 들어가는 값 — 'SAP 표준 도구' 칸이 가장 길어(394px 필요)
기존 1fr 1.3fr 1.5fr 로는 Expensive SQL 의 한 칸이 2줄로 접혔다. */
.uc-case .uc-cmp-row { display: grid; grid-template-columns: 1fr 2.6fr 2.45fr; }
.uc-case .uc-cmp-row + .uc-cmp-row { border-top: 1px solid #dee3e9; }
.uc-case .uc-cmp-head { padding: 13px 24px; background: #f1f4f7; font-size: 15px; font-weight: 700; color: #5D6C7B; text-align: center; }
.uc-case .uc-cmp-head-owlens { padding: 13px 24px; color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; background-color: #F29821; }
.uc-case .uc-cmp-label { padding: 13px 24px; font-size: 15px; font-weight: 700; color: #0a1317; }
.uc-case .uc-cmp-sap { padding: 13px 24px; font-size: 15px; color: #5d6c7b; }
.uc-case .uc-cmp-owlens { padding: 13px 24px; font-size: 15px; color: #0a1317; font-weight: 600; background: rgba(0,100,224,.06); display: flex; gap: 10px; }
.uc-case .uc-cmp-owlens .uc-ico { margin-top: 2px; }
/* ---- More Cases / 이어서 살펴보기 카드 ---- */
/* 하단 여백을 사이트 공통값(hr.end의 margin-top 150px)과 같게 맞추되, 흰 여백이 아니라
이 섹션의 회색 배경 안쪽에 둔다. 아래 hr.end의 margin은 0으로 눌러 여백이 이중으로 쌓이지 않게 한다.
(패딩을 0으로 두면 카드가 배경 경계에 붙어 보이므로 그렇게 하지 않는다.) */
.uc-case .uc-more-section { background: #f8f9fb; padding: 56px 0 150px; border-top: 1px solid #eef1f4; }
/* layout.css의 `.subpage-layout hr.end`(0,2,1)와 특정도가 같으면 나중에 로드되는 쪽이 이겨서
.uc-case를 앞에 붙여 (0,3,1)로 올린다. body에 .subpage-layout이 붙어 있다. */
.subpage-layout .uc-case ~ hr.end { margin-top: 0; }
.uc-case .uc-more-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.uc-case .uc-more-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #dee3e9; border-radius: 16px; padding: 28px; text-decoration: none; }
.uc-case .uc-more-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; min-height: 64px; align-content: flex-start; }
.uc-case .uc-mini-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 100px; background: #f1f4f7; color: #5d6c7b; font-size: 12px; font-weight: 700; }
.uc-case .uc-more-card-meta { font-size: 12px; font-weight: 700; color: #0064e0; }
.uc-case .uc-more-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 700; color: #0457cb; }
/* ---- 모달 공통 구조 ---- */
/* 기본 모달 폭은 820px — 더 좁은 모달만 style="max-width:760px" 식으로 개별 지정 */
.uc-case .uc-modal-card { position: relative; width: 100%; max-width: 820px; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: rgba(10,19,23,.45) 0 40px 100px; animation: owPopIn 240ms cubic-bezier(.2,0,0,1); }
.uc-case .uc-modal-card h3 { line-height: 1.3; }
.uc-case .uc-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 28px 32px 24px; }
.uc-case .uc-modal-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 26px 32px 30px; background: #f8f9fb; border-top: 1px solid #eef1f4; }
.uc-case .uc-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 18px 32px; border-top: 1px solid #eef1f4; }
.uc-case .uc-modal-confirm-btn { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 30px; border-radius: 100px; border: none; background: #0064e0; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
/* ---- 이미지 원본 보기(라이트박스) ----
사이트 공통 .zoom-overlay는 재사용할 수 없다. common.js가 열기 핸들러를 <768px에서만 동작시키고(317행)
≥768px에서는 오버레이를 DOM에서 아예 제거한다(369행) — 즉 모바일 전용 기능이다.
배경·닫기 버튼은 기존 모달 컴포넌트(.uc-modal-overlay / .uc-modal-x)를 그대로 쓰고 여기서는 차이만 둔다.
오버레이 DOM은 use-case.js가 .uc-case 안에 만들어 붙인다(스코프 유지 + .uc-ico 재사용 목적). */
/* 클릭 가능한 이미지. 커서는 사이트의 다른 클릭 요소(버튼·닫기·썸네일)와 같은 pointer로 맞춘다. */
.uc-case .uc-zoomable { cursor: pointer; }
/* 세로 배치: 이미지 영역 + 하단 썸네일 줄.
이미지에 flex:1을 줘 "남는 높이 전체"를 항상 차지하게 하고 object-fit:contain으로 그 안에서 맞춘다.
덕분에 이미지 비율이 달라져도 썸네일 줄의 위치가 움직이지 않는다(매직넘버 없이 고정). */
.uc-case .uc-lightbox { background: rgba(10,19,23,.85); flex-direction: column; justify-content: flex-start; gap: 16px; }
/* scale-down: 화면보다 큰 원본은 맞춰 줄이고, 작은 원본은 원본 크기 그대로 둔다.
contain은 작은 이미지를 늘려버려 글자가 뭉개진다(실제로 11장 중 6장이 최대 1.76배 확대되고 있었다). */
.uc-case .uc-lightbox-img { flex: 1 1 auto; min-height: 0; max-width: 100%; object-fit: scale-down; border-radius: 8px; }
.uc-case .uc-lightbox-close { position: absolute; top: 20px; right: 20px; }
/* 좌우 이동 버튼 — 배경/호버는 .uc-modal-x를 그대로 쓰고 위치와 방향만 지정한다 */
.uc-case .uc-lightbox-nav { position: absolute; top: 50%; margin-top: -20px; }
.uc-case .uc-lightbox-prev { left: 20px; }
.uc-case .uc-lightbox-next { right: 20px; }
.uc-case .uc-lightbox-prev .uc-ico { transform: scaleX(-1); }
/* 하단 썸네일 줄 — 개수가 많아지면 가로 스크롤 */
.uc-case .uc-lightbox-thumbs { flex: none; display: flex; gap: 8px; max-width: 100%; padding: 2px; overflow-x: auto; }
/* 대부분 어두운 화면 캡처라 투명도만으로는 배경에 묻힌다.
항상 보이는 테두리 + 어두운 바탕을 깔아 썸네일 한 칸 한 칸이 구분되게 한다. */
.uc-case .uc-lightbox-thumb { flex: none; width: 74px; height: 52px; object-fit: cover; border-radius: 6px;
border: 2px solid rgba(255,255,255,.3); background: #0a1317; opacity: .75; cursor: pointer;
transition: opacity 150ms ease-out, border-color 150ms ease-out; }
.uc-case .uc-lightbox-thumb:hover { opacity: 1; border-color: rgba(255,255,255,.6); }
.uc-case .uc-lightbox-thumb.is-current { opacity: 1; border-color: #0064e0; }
.uc-case .uc-modal-field-row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid #f1f4f7; }
.uc-case .uc-modal-field-row:last-child { border-bottom: none; }
.uc-case .uc-modal-field-row .uc-modal-field-label { font-size: 14px; font-weight: 700; color: #0a1317; }
.uc-case .uc-modal-field-row .uc-modal-field-desc { font-size: 14px; color: #5d6c7b; }
.uc-case .uc-modal-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 100px; border: 1px solid #bcd9ff; background: #f4f9ff; color: #0064e0; font-size: 12px; font-weight: 700; white-space: nowrap; }
.uc-case .uc-modal-subtitle { margin: 8px 0 0; font-size: 14px; color: #8595a4; }
.uc-case .uc-modal-table-box { margin-top: 14px; background: #fff; border: 1px solid #dee3e9; border-radius: 14px; padding: 6px 22px; }
.uc-case .uc-tip-text { margin: 0; font-size: 14px; line-height: 1.4; color: #5d6c7b; }
.uc-case .uc-tip-text--blue { color: #0457cb; }
.uc-case .uc-tip-text strong { font-weight: 800; }
/* ===== 아이콘 =====
* 인라인