/* ── 17. Link previews ───────────────────────────────── */
.s17 { height: 620px; background: var(--gray-30); color: var(--gray-820); }
.fj-h { position: absolute; left: 0; right: 0; top: 0; height: 72px; display: flex; align-items: center; gap: 30px; padding: 0 clamp(20px, 4cqw, 48px); border-bottom: 1px solid color-mix(in srgb, var(--gray-900) 8%, transparent); z-index: 5; }
.fj-lg { font-size: 20px; font-weight: 550; letter-spacing: -0.022em; }
.fj-nav { display: flex; gap: 4px; }
.fj-nav a { padding: 8px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--gray-820); text-decoration: none; cursor: default; transition: background .15s; }
.fj-nav a.on { background: color-mix(in srgb, var(--gray-900) 5%, transparent); }
.fj-sub { margin-left: auto; font-size: 13px; font-weight: 550; padding: 8px 16px; border-radius: 9999px; background: var(--gray-820); color: var(--gray-30); }
.fj-hero { position: absolute; left: clamp(20px, 4cqw, 48px); top: 128px; width: min(620px, 60cqw); }
.fj-k { margin: 0; font-size: 13px; font-weight: 550; letter-spacing: 0em; color: var(--orange-500); }
.fj-hero h3 { margin: 10px 0 0; font-size: clamp(40px, 6.4cqw, 72px); line-height: .96; letter-spacing: -0.022em; font-weight: 550; }
.fj-t { margin: 22px 0 0; font-size: 20px; line-height: 1.55; color: var(--gray-700); max-width: 44ch; }
.fj-in { color: var(--gray-820); text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--gray-900) 40%, transparent); cursor: default; }
.fj-in.on { text-decoration-color: var(--gray-820); }
.fj-img { position: absolute; right: clamp(20px, 4cqw, 48px); top: 128px; width: min(330px, 30cqw); height: 400px; border-radius: 6px; background: linear-gradient(170deg, var(--gray-150) 0%, var(--blue-400) 45%, var(--gray-700) 100%); }
.fj-card { position: absolute; left: 0; top: 0; z-index: 30; width: 320px; border-radius: 12px; background: var(--gray-0); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gray-900) 6%, transparent), var(--e3); overflow: hidden; opacity: 0; pointer-events: none; transform-origin: 50% 0; }
.fj-bar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; background: var(--gray-40); border-bottom: 1px solid color-mix(in srgb, var(--gray-900) 6%, transparent); }
.fj-bar i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--gray-900) 14%, transparent); }
.fj-url { margin-left: 8px; font-size: 11px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.fj-view { position: relative; width: 320px; height: 204px; overflow: hidden; }
.fj-mp { position: absolute; left: 0; top: 0; width: 640px; height: 408px; transform: scale(.5); transform-origin: 0 0; padding: 0 32px; opacity: 0; transition: opacity .22s ease; }
.fj-mp.on { opacity: 1; }
.fj-mp .h { display: flex; align-items: center; gap: 22px; height: 52px; border-bottom: 1px solid color-mix(in srgb, var(--gray-900) 8%, transparent); font-size: 17px; font-weight: 550; letter-spacing: -0.022em; }
.fj-mp .h span { width: 44px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--gray-900) 12%, transparent); }
.fj-mp .k { margin: 30px 0 0; font-size: 15px; font-weight: 550; color: var(--orange-500); }
.fj-mp .t { margin: 8px 0 0; font-size: 48px; line-height: 1; letter-spacing: -0.022em; font-weight: 550; }
.fj-mp .row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 22px; }
.fj-mp .im { height: 170px; border-radius: 6px; }
.fj-mp .ln i { display: block; height: 9px; border-radius: 4px; background: color-mix(in srgb, var(--gray-900) 10%, transparent); margin: 0 0 12px; }
.fj-sk { position: absolute; inset: 0; background: linear-gradient(100deg, var(--gray-40) 30%, var(--gray-20) 50%, var(--gray-40) 70%); background-size: 200% 100%; animation: fjsk 1s linear infinite; opacity: 0; transition: opacity .18s; pointer-events: none; }
.fj-sk.on { opacity: 1; transition: none; }
@keyframes fjsk { to { background-position: -200% 0; } }
.fj-meta { padding: 10px 14px 12px; font-size: 13px; line-height: 1.4; color: var(--gray-500); border-top: 1px solid color-mix(in srgb, var(--gray-900) 6%, transparent); }
.fj-meta b { display: block; font-size: 13px; color: var(--gray-820); font-weight: 550; margin-bottom: 1px; }
@container (max-width: 700px) { .fj-nav a:nth-child(n+4), .fj-sub { display: none; } .fj-img { display: none; } .fj-hero { width: auto; right: 20px; } }