@charset "UTF-8";
.page-ugc-video .commerce-hero.commerce-hero-showcase{min-height:540px;padding:18px 0 40px}
.page-ugc-video .commerce-hero-showcase:before{inset:7% -4%;background:radial-gradient(ellipse at 48% 55%,#eaded0a8,transparent 69%)}
.ugc-visual{position:relative;width:min(100%,680px);height:500px;margin:auto;isolation:isolate}
.ugc-visual-ring{position:absolute;z-index:-1;width:64%;aspect-ratio:1;left:18%;top:7%;border:1px solid #d4bfb3;border-radius:50%;box-shadow:0 0 0 34px #e7d9ce6b,0 0 0 70px #e7d9ce31}
.ugc-frame{position:absolute;overflow:hidden;background:#24221f;box-shadow:0 32px 54px -22px #2d2924a3}
.ugc-frame img{display:block;width:100%;height:100%;object-fit:cover}
.ugc-frame-back{left:7%;top:14%;width:36%;height:72%;border:6px solid #fff;border-radius:19px;transform:rotate(-8deg);animation:ugc-back-breathe 7s ease-in-out infinite alternate}
.ugc-frame-back img{object-position:50% 70%}
.ugc-frame-shade{position:absolute;inset:42% 0 0;background:linear-gradient(transparent,#1c1715ae)}
.ugc-frame-label{position:absolute;left:13px;bottom:15px;color:#fff;font-size:9px;font-weight:800;letter-spacing:.13em}
.ugc-frame-main{right:13%;top:1%;width:43%;height:94%;border:7px solid #252421;border-radius:34px;box-shadow:0 38px 63px -25px #2e2823ba,0 0 0 4px #fff;animation:ugc-main-breathe 6s ease-in-out infinite alternate}
.ugc-frame-main img{object-position:50% 69%}
.ugc-phone-top{position:absolute;z-index:2;left:0;right:0;top:0;height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:#fff;background:linear-gradient(#1c1a18a8,transparent);font-size:9px;letter-spacing:.09em}
.ugc-phone-top i{width:35%;height:13px;background:#252421;border-radius:0 0 10px 10px;align-self:flex-start}
.ugc-phone-top b{font-size:9px}
.ugc-main-caption{position:absolute;left:19px;right:16px;bottom:37px;color:#fff;text-shadow:0 2px 9px #0009;display:flex;flex-direction:column;gap:7px}
.ugc-main-caption small{font-size:8px;font-weight:800;letter-spacing:.12em}
.ugc-main-caption strong{font-size:clamp(26px,2.6vw,39px);line-height:1.02;letter-spacing:-.06em}
.ugc-phone-progress{position:absolute;left:20px;right:20px;bottom:18px;height:2px;background:#ffffff8a}
.ugc-phone-progress:before{content:"";display:block;width:42%;height:100%;background:#fff;animation:ugc-progress 7s ease-in-out infinite alternate}
.ugc-visual-mark{position:absolute;right:0;top:11%;font-size:clamp(22px,3vw,41px);font-weight:850;letter-spacing:-.08em;color:#39342f;writing-mode:vertical-rl}
.ugc-visual-mark span{color:#c9aa95}
.ugc-visual-note{position:absolute;left:3%;bottom:8px;color:#806e61;font-size:9px;font-weight:800;letter-spacing:.15em}
.ugc-gallery{background:#eeeae4}
.ugc-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ugc-gallery-card{position:relative;min-width:0;height:clamp(420px,46vw,610px);margin:0;overflow:hidden;border-radius:16px;background:#201d1b;color:#fff}
.ugc-gallery-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 68%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ugc-gallery-card:hover img{transform:scale(1.045)}
.ugc-gallery-card:after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(transparent,#161311de)}
.ugc-gallery-card figcaption{position:absolute;z-index:1;left:32px;right:30px;bottom:31px;display:flex;flex-direction:column;gap:8px}
.ugc-gallery-card figcaption span{font-size:10px;font-weight:800;letter-spacing:.15em;color:#f2cab3}
.ugc-gallery-card figcaption strong{max-width:17ch;font-size:clamp(26px,2.4vw,38px);line-height:1.1;letter-spacing:-.05em}
.ugc-gallery-card figcaption small{max-width:42ch;font-size:13px;line-height:1.5;color:#eee6df}
.ugc-gallery-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:24px;color:#716960;font-size:12px;line-height:1.5}
.ugc-gallery-foot a{display:inline-flex;align-items:center;gap:17px;flex-shrink:0;padding-bottom:6px;border-bottom:1px solid #8e8377;color:#272825;text-decoration:none;font-weight:750}
.ugc-gallery-foot a:hover{color:#8d624a}
@keyframes ugc-back-breathe{to{transform:translateY(-6px) rotate(-7deg)}}
@keyframes ugc-main-breathe{to{transform:translateY(5px)}}
@keyframes ugc-progress{to{width:86%}}
@media(max-width:1000px){.page-ugc-video .commerce-hero.commerce-hero-showcase{min-height:435px}.ugc-visual{height:390px}.ugc-frame-main{right:11%}.ugc-visual-mark{right:-1%}}
@media(max-width:760px){.page-ugc-video .commerce-hero.commerce-hero-showcase{min-height:440px;padding:10px 0 34px}.ugc-visual{height:420px;max-width:560px}.ugc-frame-main{right:13%}.ugc-gallery-grid{gap:13px}.ugc-gallery-card{height:430px}.ugc-gallery-card figcaption{left:20px;right:18px;bottom:20px}.ugc-gallery-card figcaption strong{font-size:26px}.ugc-gallery-card figcaption small{font-size:12px}.ugc-gallery-foot{flex-direction:column;align-items:flex-start}}
@media(max-width:520px){.page-ugc-video .commerce-hero.commerce-hero-showcase{min-height:338px;padding:5px 0 30px}.ugc-visual{height:310px}.ugc-frame-back{left:5%;top:15%;width:38%;height:71%;border-width:4px;border-radius:12px}.ugc-frame-main{right:13%;top:3%;width:43%;height:89%;border-width:4px;border-radius:22px;box-shadow:0 26px 38px -18px #2e2823a6,0 0 0 3px #fff}.ugc-phone-top{height:26px;padding:0 8px;font-size:5px}.ugc-phone-top b{font-size:5px}.ugc-phone-top i{height:8px}.ugc-main-caption{left:10px;right:9px;bottom:22px;gap:4px}.ugc-main-caption small{font-size:5px}.ugc-main-caption strong{font-size:20px}.ugc-phone-progress{left:10px;right:10px;bottom:10px}.ugc-frame-label{left:7px;bottom:8px;font-size:6px}.ugc-visual-note{font-size:6px;bottom:0}.ugc-gallery-grid{grid-template-columns:1fr}.ugc-gallery-card{height:460px}.ugc-gallery-card figcaption strong{font-size:30px}.ugc-gallery-card figcaption small{font-size:12px}}
@media(max-width:360px){.ugc-visual{height:275px}.page-ugc-video .commerce-hero.commerce-hero-showcase{min-height:300px}.ugc-main-caption strong{font-size:17px}.ugc-gallery-card{height:405px}}
@media(prefers-reduced-motion:reduce){.ugc-frame-back,.ugc-frame-main,.ugc-phone-progress:before{animation:none}.ugc-gallery-card img{transition:none}}