.thumbs{display:flex;gap:0.5rem;margin:0.625rem 0 0.375rem;padding:0;list-style:none;}
.thumbs li{width:42px;height:42px;border-radius:0.5rem;overflow:hidden;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:0.75rem;color:var(--muted);cursor:pointer;transition:transform .15s ease;}
.thumbs li:hover{transform:translateY(-2px);}
.thumbs img{width:100%;height:100%;object-fit:cover;}
.slide-in-right{opacity:0;transform:translateX(24px);transition:opacity .6s ease, transform .6s ease;}
.slide-in-right.is-visible{opacity:1;transform:translateX(0);}
.thumbs20{list-style:none;padding:0;margin:0;display:grid;gap:0.625rem;grid-auto-rows:1fr;max-height:520px;overflow:auto;-webkit-overflow-scrolling:touch;}
.thumbs20 .t{cursor:pointer;}
.thumbs20 .frame{border-radius:0.625rem;}
.thumbs20 .t.is-active .frame{border-color:var(--deep);}
.thumbs21{list-style:none;padding:0;margin:0;display:flex;gap:0.625rem;overflow:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding-right:0.5rem;}
.thumbs21 .t{cursor:pointer;flex:0 0 auto;}
.thumbs21 .frame{width:84px;aspect-ratio:1/1;border-radius:0.625rem;}
.thumbs21 .t.is-active .frame{border-color:var(--brand-sub);}
.media21.has-slider{position:relative;}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);border:1px solid var(--line);width:36px;height:36px;border-radius:62.4375rem;display:flex;align-items:center;justify-content:center;color:#6b7280;cursor:pointer;box-shadow:var(--shadow);}
.carousel-btn:hover{color:var(--brand-sub);}
.thumbs21-wrap{position:relative;display:flex;align-items:center;gap:0.5rem;overflow:hidden;}
.carousel-edge{flex:0 0 auto;width:28px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:0.625rem;background:#fff;color:#6b7280;cursor:pointer;}
.carousel-edge:hover{color:var(--brand-sub);}
.thumbs21::-webkit-scrollbar{height:8px;}
@media (max-width: 480px){.thumbs li{width:38px;height:38px;}}
@media (max-width: 768px){.thumbs21{width:max-content;margin-inline:auto;}.thumbs21-wrap{margin-top:0.375rem;}.thumbs li{width:36px;height:36px;}.thumbs21 .frame{width:64px;}.thumbs21 .frame{width:60px;}.carousel-btn{width:30px;height:30px;}.carousel-btn{width:28px;height:28px;}.carousel-edge{width:28px;height:34px;}.carousel-edge{width:26px;height:32px;}.thumbs21-wrap{margin-top:0.375rem;}.thumbs21-wrap{gap:0.375rem;}.thumbs21{gap:0.5rem;padding-bottom:0.125rem;}.thumbs21 .frame{width:64px;}.thumbs21 .frame{width:68px;}.carousel-btn{width:30px;height:30px;top:50%;transform:translateY(-50%);}.carousel-edge{height:36px;}.carousel-edge{width:28px;height:34px;}}
@media (max-width:768px){.thumbs21 .frame{width:72px;}.thumbs20{order:2;grid-auto-flow:column;grid-auto-columns:72px;grid-auto-rows:unset;max-height:none;overflow:auto;}.thumbs21-wrap{margin-top:0.375rem;}.thumbs21{gap:0.5rem;}.thumbs21 .frame{width:64px;}.thumbs20 .frame{width:72px;aspect-ratio:1/1;}.carousel-btn{width:28px;height:28px;}.carousel-edge{width:26px;height:32px;}.thumbs21 .frame{width:64px;}}
@media (max-width:480px){.thumbs20 .frame{width:60px;}.thumbs21 .frame{width:60px;}}
@media(max-width:768px){.carousel-btn{width:32px;height:32px;}.carousel-edge{height:40px;}.thumbs21 .frame{width:72px;}}
@media (max-width: 1024px){.thumbs21 .frame{width:76px;}.carousel-btn{width:34px;height:34px;}}
@media (max-width: 560px){.thumbs21 .frame{width:56px;}.thumbs21{gap:0.5rem;}.carousel-btn{width:28px;height:28px;}}
@media (max-width: 420px){.thumbs21 .frame{width:50px;}.thumbs21{gap:0.375rem;}.carousel-btn{width:26px;height:26px;}}
@media (max-width: 360px){.thumbs21 .frame{width:44px;}.thumbs21{gap:0.375rem;}}
@media (max-width:560px){.thumbs21 .frame{width:56px;}.carousel-btn{width:26px;height:26px;}}