.anm-rpc { background: var(--anm-rpc-wrapper-bg, #f3f4f6); background: var(--anm-rpc-wrapper-bg, #f3f4f6) !important; border-radius: 12px; padding: var(--anm-rpc-wrapper-padding, 24px); padding: var(--anm-rpc-wrapper-padding, 24px) !important; position: relative; overflow: hidden; } .anm-rpc-inner { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; align-items: center; } .anm-rpc-track-wrap { min-width: 0; overflow: hidden; } .anm-rpc-track { display: flex; align-items: flex-start; gap: var(--anm-rpc-slide-gap, 12px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-inline: var(--anm-rpc-track-side-padding, 0px); -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; scrollbar-width: none; width: 100%; padding: 16px 8px; } .anm-rpc-track::-webkit-scrollbar { display: none; } .anm-rpc-card { flex: 0 0 var(--anm-rpc-slide-width, 260px); height: auto !important; background: var(--anm-rpc-card-bg, #fff); border: var(--anm-rpc-card-border, 1px solid #e5e7eb); border-radius: var(--anm-rpc-card-radius, 14px); box-shadow: var(--anm-rpc-card-shadow, 0 10px 24px rgba(17, 24, 39, 0.12)); overflow: hidden; scroll-snap-align: center; transform: scale(var(--anm-rpc-focus-scale-other, 0.75)); opacity: var(--anm-rpc-focus-opacity-other, 0.45); transition: transform 260ms ease, opacity 260ms ease, box-shadow 260ms ease; will-change: transform, opacity; } .anm-rpc-card.is-near { transform: scale(var(--anm-rpc-focus-scale-near, 0.88)); opacity: var(--anm-rpc-focus-opacity-near, 0.72); } .anm-rpc-card.is-active { transform: scale(var(--anm-rpc-focus-scale-active, 1)); opacity: 1; z-index: 2; } .anm-rpc-card-link { display: block; color: inherit; text-decoration: none; } .anm-rpc-card-link:visited, .anm-rpc-card-link:hover, .anm-rpc-card-link:focus { color: inherit; text-decoration: none; } .anm-rpc-media { display: block; line-height: 0; overflow: hidden; } .anm-rpc-media img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 320ms ease; transform-origin: center center; } .anm-rpc-card:hover .anm-rpc-media img, .anm-rpc-card:focus-within .anm-rpc-media img { transform: scale(1.09); } .anm-rpc-content { padding: 12px; } .anm-rpc-title { margin: 0 0 6px; color: var(--anm-rpc-title-color, #111827); font-size: 18px; line-height: 1.25; text-align: var(--anm-rpc-title-align, left); } .anm-rpc-subtitle { margin: 0; color: var(--anm-rpc-subtitle-color, #4b5563); font-size: 14px; line-height: 1.4; text-align: var(--anm-rpc-subtitle-align, left); } .anm-rpc .anm-rpc-nav { width: 42px; height: 42px; border: var(--anm-rpc-control-border, 1px solid #cbd5e1); background: var(--anm-rpc-control-bg, #ffffff); color: var(--anm-rpc-control-color, #334155); border-radius: var(--anm-rpc-control-radius, 8px); cursor: pointer; font-size: 24px; line-height: 1; padding: 0; box-shadow: none; text-transform: none; -webkit-appearance: none; appearance: none; width: 42px !important; height: 42px !important; border: var(--anm-rpc-control-border, 1px solid #cbd5e1) !important; background: var(--anm-rpc-control-bg, #ffffff) !important; color: var(--anm-rpc-control-color, #334155) !important; border-radius: var(--anm-rpc-control-radius, 8px) !important; cursor: pointer !important; font-size: 24px !important; line-height: 1 !important; padding: 0 !important; box-shadow: none !important; text-transform: none !important; } .anm-rpc .anm-rpc-nav:hover, .anm-rpc .anm-rpc-nav:focus { background: var(--anm-rpc-control-hover-bg, #f8fafc) !important; color: var(--anm-rpc-control-color, #334155) !important; } .anm-rpc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; } .anm-rpc-dot { width: var(--anm-rpc-dot-size, 8px); height: var(--anm-rpc-dot-size, 8px); border-radius: 999px; background: var(--anm-rpc-dot-color, #9ca3af); } .anm-rpc-dot.is-active { background: var(--anm-rpc-dot-active-color, #111827); } @media (max-width: 768px) { .anm-rpc-inner { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 6px; } .anm-rpc .anm-rpc-nav { width: 36px; height: 36px; font-size: 20px; width: 36px !important; height: 36px !important; font-size: 20px !important; } }