/* /ai/usecases 활용 사례 영상 모음 — 신규 메인(.nidx)과 같은 토큰, .ucx 로 스코프 */
.ucx {
    --ivory:#FBF8F2; --cream:#F4EEE4; --white:#FFFFFF;
    --dark:#2B2320; --stone:#6E655E; --stone-light:#9E8E86; --line:#EBE3D6;
    --rose:#BC8E76; --rose-deep:#A8705A; --rose-tint:#F5E9E0;
    --teal:#46BEC0; --teal-deep:#2FA9AB; --teal-tint:#DEF3F3;
    font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
    background:var(--ivory); color:var(--dark); line-height:1.6; font-size:15px; -webkit-font-smoothing:antialiased;
}
.ucx *, .ucx *::before, .ucx *::after { box-sizing:border-box; }
.ucx h1, .ucx h2 { font-family:inherit; margin:0; letter-spacing:normal; text-transform:none; word-break:keep-all; }
.ucx p { margin:0; word-break:keep-all; }
.ucx a { color:inherit; text-decoration:none; }
.ucx-wrap { max-width:1180px; margin:0 auto; padding:0 24px; }

.ucx-hero { padding:72px 0 40px; border-bottom:1px solid var(--line);
    background-color:var(--ivory); background-image:radial-gradient(rgba(188,142,118,.18) 1.1px,transparent 1.1px); background-size:22px 22px; }
.ucx-en { font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:19px; color:var(--rose); margin-bottom:6px !important; }
.ucx-hero h1 { font-size:clamp(28px,3.6vw,42px); line-height:1.3; font-weight:800; letter-spacing:-.02em; }
.ucx-lead { margin-top:14px !important; color:var(--stone); font-size:16px; }

.ucx-list { padding:44px 0 80px; }
.ucx-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 22px; }

/* 유튜브형 카드: 16:9 썸네일 + 제목·설명 */
.ucx-card { display:flex; flex-direction:column; gap:14px; }
.ucx-thumb { position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:0; border-radius:16px; overflow:hidden;
    background:var(--cream); cursor:pointer; box-shadow:0 18px 40px -28px rgba(43,35,32,.55); }
.ucx-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.ucx-thumb:hover img, .ucx-thumb:focus-visible img { transform:scale(1.04); }
.ucx-thumb:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
.ucx-play { position:absolute; left:50%; top:50%; width:68px; height:68px; margin:-34px 0 0 -34px; border-radius:50%;
    background:rgba(43,35,32,.72); display:grid; place-items:center; opacity:0; transition:background .2s, transform .2s, opacity .2s; }
/* 썸네일 문구를 가리지 않도록 재생 버튼은 마우스를 올렸을 때만(터치 기기는 항상) */
.ucx-thumb:hover .ucx-play, .ucx-thumb:focus-visible .ucx-play { opacity:1; }
@media (hover:none) { .ucx-play { opacity:1; width:52px; height:52px; margin:-26px 0 0 -26px; } .ucx-play svg { width:24px; height:24px; } }
.ucx-play svg { width:30px; height:30px; fill:#fff; margin-left:4px; }
.ucx-thumb:hover .ucx-play { background:var(--teal-deep); transform:scale(1.08); }
.ucx-dur { position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.78); color:#fff; font-size:12.5px; font-weight:600;
    padding:2px 7px; border-radius:6px; letter-spacing:.02em; }

.ucx-meta { display:flex; gap:12px; align-items:flex-start; }
.ucx-title { font-size:17px; font-weight:700; line-height:1.4; }
.ucx-sub { font-size:13px; color:var(--stone-light); margin-top:3px !important; }
.ucx-desc { font-size:14px; color:var(--stone); margin-top:8px !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ucx-tags { margin-top:8px !important; display:flex; flex-wrap:wrap; gap:6px; }
.ucx-tags span { font-size:12px; color:var(--teal-deep); background:var(--teal-tint); border-radius:100px; padding:2px 9px; }

.ucx-thumb--soon { display:grid; place-items:center; cursor:default; box-shadow:none; border:1.5px dashed var(--line); background:var(--white);
    color:var(--stone-light); font-size:15px; text-align:center; line-height:1.5; }
.ucx-card--soon .ucx-title { color:var(--stone-light); }

.ucx-cta { margin-top:56px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
    background:var(--teal-tint); border:1px solid #C9EEF0; border-radius:22px; padding:26px 30px; }
.ucx-cta strong { display:block; font-size:18px; font-weight:800; }
.ucx-cta span { color:var(--stone); font-size:14.5px; }
.ucx-go { display:inline-flex; align-items:center; gap:10px; background:var(--dark); color:#fff !important; border-radius:14px; padding:15px 22px;
    font-size:16px; font-weight:600; box-shadow:0 14px 30px -16px rgba(43,35,32,.6); transition:background .2s; }
.ucx-go:hover { background:#000; }

/* 재생 레이어: 전체화면을 지원하지 않는 브라우저에서는 화면을 덮는 플레이어로 대신한다 */
.ucx-player { position:fixed; inset:0; z-index:2000; background:#000; display:flex; align-items:center; justify-content:center; }
.ucx-player video { width:100%; height:100%; object-fit:contain; background:#000; }
.ucx-close { position:absolute; top:16px; right:16px; z-index:2; width:44px; height:44px; border-radius:50%; border:0;
    background:rgba(255,255,255,.16); color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.ucx-close:hover { background:rgba(255,255,255,.3); }
html.ucx-lock, html.ucx-lock body { overflow:hidden; }

@media (max-width:1000px) { .ucx-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) {
    .ucx-hero { padding:48px 0 28px; }
    .ucx-lead br { display:none; }
    .ucx-grid { grid-template-columns:1fr; gap:28px; }
    .ucx-wrap { padding:0 16px; }
    .ucx-cta { padding:22px; }
    .ucx-go { width:100%; justify-content:center; }
}