/* Redesign (branch redesign): reference layout, BBerBee guide — lime, ink, Pretendard, soft rounded panels. */
.v-hero,.v-sec{width:min(100% - 32px,1120px);margin-inline:auto}
.v-hero{display:grid;gap:44px;align-items:center;padding-top:112px}
.v-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--lime-wash);color:#3F6212;font-size:14px;font-weight:700}
.v-chip i{width:8px;height:8px;border-radius:50%;background:var(--lime-text)}
.v-hero h1{margin-top:0;font-size:clamp(36px,5.4vw,60px);line-height:1.18;letter-spacing:-.05em;font-weight:800;text-align:left}
.v-lead{margin-top:18px;font-size:clamp(16px,1.6vw,19px);line-height:1.6;font-weight:500;color:var(--muted);text-wrap:balance}
@media (max-width:759px){.v-lead br{display:none}}
.v-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.v-ctas .btn-main{width:auto;padding:0 28px;height:58px;font-size:17px}
.btn-line{display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 26px;border-radius:20px;background:var(--lime);color:var(--ink);font-size:17px;font-weight:700;text-decoration:none;transition:background-color .2s}
@media (hover:hover){.btn-line:hover{background:#B8E84A}}
.v-note{margin-top:22px;font-size:14px;font-weight:600;color:var(--muted)}

/* hero art */
.v-hero-art{position:relative;padding:0 0 64px}
.v-stage{position:relative;aspect-ratio:16 / 11;border-radius:28px;overflow:hidden;background:var(--ink)}
.v-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;opacity:.92}
.v-stage-top{position:absolute;left:16px;top:16px;display:flex;gap:8px;align-items:center}
.v-stage-top span{padding:5px 10px;border-radius:8px;background:rgb(0 0 0 / .6);color:var(--white);font-size:13px;font-weight:700}
.v-live{display:inline-block;padding:4px 9px;border-radius:7px;background:#D92D20;color:var(--white);font-size:13px;font-weight:800;letter-spacing:.02em}
.v-voice{position:absolute;left:16px;top:58px;max-width:min(62%,330px);padding:12px 16px;border-radius:18px;background:var(--white);font-size:15px;font-weight:700;line-height:1.45;box-shadow:0 10px 30px rgb(0 0 0 / .18)}
.v-voice small{display:block;margin-bottom:4px;font-size:12px;color:var(--muted)}
.v-done{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:var(--lime);font-size:14px;font-weight:600}
.v-done .icon{width:18px;height:18px;stroke-width:3}
.v-phone{position:absolute;right:-8px;bottom:0;width:min(42%,214px);padding:16px 12px 12px;border-radius:24px;background:var(--white);display:grid;justify-items:center;box-shadow:0 1px 0 rgb(0 0 0 / .04),0 16px 40px rgb(0 0 0 / .16)}
.v-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lime);font-size:18px;font-weight:800}
.v-name{margin-top:6px;font-size:15px;font-weight:800}
.v-onair{margin-top:2px;font-size:11px;font-weight:700;color:#D92D20}
.v-item{display:flex;align-items:center;gap:8px;width:100%;margin-top:8px;padding:6px;border-radius:12px;background:var(--panel);font-size:11px;font-weight:600;color:var(--muted);text-align:left}
.v-item img,.v-item i{flex:none;width:36px;height:36px;border-radius:9px;object-fit:cover;object-position:55% 35%}
.v-item span{display:grid;min-width:0}
.v-item b{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-item em{font-style:normal;font-size:10px;font-weight:800;color:#3F6212}
.v-item-new{background:var(--lime-wash);outline:2px solid var(--lime)}
.v-item.is-off{opacity:.45}
.v-buy{width:100%;margin-top:10px;padding:10px;border-radius:12px;background:var(--ink);color:var(--white);font-size:13px;font-weight:700;text-align:center}

/* section base */
.v-sec{padding-top:clamp(168px,20vw,280px)}
.v-eyebrow{font-size:15px;font-weight:800;color:#3F6212}
.v-sec h2,.v-dark h2,.v-closing h2{margin-top:12px;font-size:clamp(30px,4.4vw,48px);line-height:1.25;letter-spacing:-.045em;font-weight:800;text-align:left}

.v-cards3{display:grid;gap:12px;margin-top:40px}
.v-cards3 li{padding:28px;border-radius:28px;background:var(--panel)}
.v-cards3 .icon{width:30px;height:30px}
.v-cards3 b{display:block;margin-top:22px;font-size:20px;font-weight:800}
.v-cards3 p{margin-top:8px;font-size:16px;line-height:1.55;font-weight:500;color:var(--muted)}

/* buyer pain */
.v-buyer-pain{display:grid;gap:40px;align-items:center}
.v-kakao-pill{flex:none;align-self:center;padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--lime);font-size:13px;font-weight:800}
.v-steps2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.v-steps2>div{padding:22px;border-radius:24px;background:var(--panel)}
.v-steps2 b{font-size:15px;font-weight:800;color:var(--muted)}
.v-steps2 ol{margin-top:12px;display:grid;gap:8px;counter-reset:s;font-size:15px;font-weight:600;color:var(--muted)}
.v-steps2 li{counter-increment:s}
.v-steps2 li::before{content:counter(s) '. '}
.v-steps2 .is-dark{display:flex;flex-direction:column;background:var(--ink);color:var(--white)}
.v-steps2 .is-dark b{color:var(--lime)}
.v-steps2 .is-dark ol{color:var(--white);font-weight:700;font-size:16px}
.v-steps2 small{margin-top:auto;padding-top:16px;font-size:13px;line-height:1.5;color:var(--on-dark)}

/* how */
.v-how{display:grid;gap:12px;margin-top:40px}
.v-how>li{display:flex;flex-direction:column;padding:24px;border-radius:28px;background:var(--panel)}
.v-step{font-size:13px;font-weight:800;color:#3F6212;letter-spacing:.04em}
.v-how>li>b{margin-top:10px;font-size:20px;font-weight:800}
.v-how>li>p{margin-top:14px;font-size:15px;line-height:1.55;font-weight:500;color:var(--muted)}
.v-mini{margin-top:16px;padding:14px;border-radius:18px;background:var(--white);font-size:14px;font-weight:700;line-height:1.45}
.v-mini-voice{background:var(--ink);color:var(--white)}
.v-mini-voice small{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:12px;color:var(--lime)}
.v-mini-voice small i{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.v-mini-item{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--muted)}
.v-mini-item img{width:52px;height:52px;border-radius:12px;object-fit:cover;object-position:55% 35%}
.v-mini-item span{display:grid}
.v-mini-item b{font-size:15px;color:var(--ink)}
.v-mini-form{display:grid;gap:6px}
.v-mini-form span{padding:9px 12px;border-radius:10px;background:var(--panel);font-size:13px;font-weight:600;color:var(--muted)}
.v-mini-form b{padding:10px;border-radius:10px;background:var(--ink);color:var(--white);font-size:13px;text-align:center}
.v-mini-pay{display:grid;gap:6px}
.v-mini-pay span{display:flex;justify-content:space-between;padding:9px 12px;border-radius:10px;background:var(--panel);font-size:13px}
.v-mini-pay em{font-style:normal}
.v-mini-pay .ok{background:var(--lime-wash)}.v-mini-pay .ok em{color:#3F6212}
.v-mini-pay .warn{background:#FEF0E7}.v-mini-pay .warn em{color:#B54708}

/* buyer screens (dark) */
.v-dark{margin-top:clamp(168px,20vw,280px);padding:clamp(80px,10vw,128px) 0;background:var(--ink);color:var(--white)}
.v-dark-in{width:min(100% - 32px,1120px);margin:0 auto}
.v-dark .v-eyebrow{color:var(--lime)}
.v-dark .v-lead{color:var(--on-dark)}
.v-phones{display:grid;gap:28px;margin-top:44px}
.v-phones>li{display:grid;justify-items:center;gap:16px}
.v-ph{display:flex;flex-direction:column;align-items:center;width:100%;min-height:360px;padding:24px 20px;border-radius:28px;background:var(--white);color:var(--ink)}
.v-ph .v-item{margin-top:10px;padding:8px;font-size:13px}
.v-ph .v-item b{font-size:14px}
.v-ph .v-item img,.v-ph .v-item i{width:44px;height:44px}
.v-ph-title{align-self:stretch;font-size:18px;font-weight:800;line-height:1.35}
.v-ph-sub{align-self:stretch;margin-top:4px;font-size:13px;font-weight:600;color:var(--muted)}
.v-ph label{align-self:stretch;display:grid;gap:4px;margin-top:12px;font-size:12px;font-weight:700;color:var(--muted)}
.v-ph label span{padding:11px 12px;border-radius:12px;background:var(--panel);font-size:14px;color:var(--ink)}
.v-ph .v-buy{margin-top:auto;padding:13px;font-size:14px}
.v-ok{align-self:flex-start;display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;border-radius:50%;background:var(--lime)}
.v-ok .icon{width:22px;height:22px;stroke-width:3}
.v-pay{align-self:stretch;display:grid;gap:10px;margin:18px 0 0;padding:16px;border-radius:16px;background:var(--panel)}
.v-pay div{display:flex;justify-content:space-between;font-size:13px}
.v-pay dt{color:var(--muted);font-weight:600}
.v-pay dd{margin:0;font-weight:800}
.v-cap{display:flex;align-items:baseline;gap:8px;font-size:16px;font-weight:700}
.v-cap em{font-style:normal;font-size:13px;color:var(--lime)}
.btn-lime{display:flex;align-items:center;justify-content:center;width:min(100%,320px);height:60px;margin:48px auto 0;border-radius:20px;background:var(--lime);color:var(--ink);font-size:17px;font-weight:800;text-decoration:none;transition:transform .15s var(--ease)}
.btn-lime:active{transform:scale(.97)}

/* admin */
.v-table{margin-top:40px;border-radius:28px;background:var(--panel);padding:8px}
.v-table-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 10px}
.v-table-head>span:first-child{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800}
.v-filters{display:flex;gap:6px}
.v-filters i{padding:7px 12px;border-radius:999px;background:var(--white);font-size:13px;font-style:normal;font-weight:700;color:var(--muted)}
.v-filters i.on{background:var(--ink);color:var(--white)}
.v-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px}
.v-stats div{display:grid;gap:2px;padding:14px;border-radius:18px;background:var(--white)}
.v-stats span{font-size:13px;font-weight:700;color:var(--muted)}
.v-stats b{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.v-stats b.w{color:#B54708}
.v-rows{display:grid;gap:6px;padding:6px}
.v-row{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--white);font-size:14px;font-weight:600}
.v-row>span:nth-child(1){grid-row:span 2;color:var(--muted);font-variant-numeric:tabular-nums}
.v-row>span:nth-child(2){display:flex;gap:6px;align-items:baseline;color:var(--muted)}
.v-row>span:nth-child(2) b{color:var(--ink);font-size:15px}
.v-row>span:nth-child(3),.v-row>span:nth-child(4){display:none}
.v-row>span:nth-child(5){grid-column:2;color:var(--muted);font-size:13px}
.v-row>span:nth-child(6){grid-column:3;grid-row:1 / span 2}
.v-row em{font-style:normal;font-weight:800;color:#B54708}
.v-row i{display:inline-block;padding:6px 11px;border-radius:999px;background:var(--panel);font-size:13px;font-style:normal;font-weight:800;color:var(--muted);white-space:nowrap}
.v-row i.ok{background:var(--lime);color:var(--ink)}
.v-row i.warn{background:#FEF0E7;color:#B54708}
.v-row.is-warn{background:#FFFBF5}
.v-row-h{display:none}
.n{font-variant-numeric:tabular-nums;font-weight:800}

/* compare */
.v-vs-grid{display:grid;gap:12px;margin-top:40px}
.v-vs-grid>div{padding:30px;border-radius:28px;background:var(--panel)}
.v-vs-grid b{font-size:15px;font-weight:800;color:var(--muted)}
.v-vs-grid ul{display:grid;gap:14px;margin-top:18px;font-size:17px;font-weight:600;color:var(--muted)}
.v-vs-grid .is-dark{background:var(--ink);color:var(--white)}
.v-vs-grid .is-dark b{color:var(--lime)}
.v-vs-grid .is-dark ul{color:var(--white);font-weight:700}
.v-vs-grid .is-dark li{display:flex;gap:10px}
.v-vs-grid .is-dark li::before{content:'';flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}

/* motion (plays while on screen) */
@media (prefers-reduced-motion:no-preference){
  .js-motion [data-play] :is(.v-voice,.v-done,.v-item-new,.v-mini,.v-row:not(.v-row-h),.v-kakao-body>*){animation-play-state:paused}
  .js-motion [data-play].is-play :is(.v-voice,.v-done,.v-item-new,.v-mini,.v-row:not(.v-row-h),.v-kakao-body>*){animation-play-state:running}
  .v-hero-art .v-voice{animation:vh-voice 7s var(--ease) infinite}
  .v-hero-art .v-done{animation:vh-done 7s var(--ease) infinite}
  .v-hero-art .v-item-new{animation:vh-new 7s var(--ease) infinite}
  .v-how .v-mini{animation:v-up .7s var(--ease) both}
  .v-how li:nth-child(2) .v-mini{animation-delay:.15s}.v-how li:nth-child(3) .v-mini{animation-delay:.3s}.v-how li:nth-child(4) .v-mini{animation-delay:.45s}
  .v-rows .v-row:not(.v-row-h){animation:v-up .6s var(--ease) both}
  .v-rows .v-row:nth-child(3){animation-delay:.12s}.v-rows .v-row:nth-child(4){animation-delay:.24s}.v-rows .v-row:nth-child(5){animation-delay:.36s}
  .v-kakao-body>*{animation:v-up .5s var(--ease) both}
  .v-kakao-body>:nth-child(2){animation-delay:.25s}.v-kakao-body>:nth-child(3){animation-delay:.5s}.v-kakao-body>:nth-child(4){animation-delay:.75s}.v-kakao-body>:nth-child(5){animation-delay:1s}.v-kakao-body>:nth-child(6){animation-delay:1.25s}.v-kakao-body>:nth-child(7){animation-delay:1.6s}
}
@keyframes v-up{from{opacity:0;transform:translateY(14px)}}
@keyframes vh-voice{0%,6%{opacity:0;transform:translateY(10px) scale(.96)}14%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes vh-done{0%,30%{opacity:0;transform:translateY(10px)}38%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes vh-new{0%,44%{opacity:0;transform:translateY(-10px) scale(.96)}54%,90%{opacity:1;transform:none}97%,100%{opacity:0}}

@media (min-width:760px){
  .v-cards3,.v-how{grid-template-columns:repeat(2,1fr)}
  .v-phones{grid-template-columns:repeat(3,1fr)}
  .v-vs-grid{grid-template-columns:1fr 1fr}
  .v-row{grid-template-columns:64px 1.3fr 1.2fr 90px 1.4fr 110px;gap:12px}
  .v-row>span:nth-child(n){display:block;grid-row:auto;grid-column:auto}
  .v-row>span:nth-child(2){display:flex}
  .v-row-h{display:grid;background:none;padding-block:4px;font-size:13px;color:var(--muted)}
  .v-row>span:nth-child(4){text-align:right}
}
@media (min-width:1000px){
  .v-hero{grid-template-columns:1.05fr 1fr;gap:56px;padding-top:150px}
  .v-cards3{grid-template-columns:repeat(3,1fr)}
  .v-buyer-pain{grid-template-columns:360px 1fr;gap:80px}
}
@media (max-width:759px){
  .v-stats{grid-template-columns:repeat(2,1fr)}
  .v-filters{display:none}
  .v-steps2{grid-template-columns:1fr}
  .v-voice{font-size:12.5px;top:50px;left:12px;max-width:56%;padding:10px 12px}
  .v-done{font-size:12.5px;left:12px;bottom:12px;padding:8px 11px}
  .v-hero-art{padding-bottom:40px}
  .v-phone{width:44%;padding:12px 8px 8px;border-radius:20px}
  .v-phone .v-av{width:32px;height:32px;font-size:14px}
  .v-phone .v-name{font-size:13px}.v-phone .v-onair{font-size:10px}
  .v-phone .v-item{padding:5px;gap:6px}.v-phone .v-item img,.v-phone .v-item i{width:28px;height:28px}
  .v-phone .v-item b{font-size:11px}.v-phone .v-item em{font-size:9px}
  .v-phone .v-item:not(.v-item-new){display:none}
  .v-phone .v-buy{padding:8px;font-size:12px}
  .v-ctas .btn-main,.v-ctas .btn-line{flex:1 1 100%}
}
.faq.v-sec{padding-inline:0}
.faq.v-sec h2{text-align:left}
@media (max-width:360px){.v-done-pre{display:none}}

/* pain bento: square tiles with looping motion */
.v-bento{display:grid;gap:12px;margin-top:40px}
.v-bento>li{aspect-ratio:1;display:flex;flex-direction:column;padding:clamp(20px,2.4vw,28px);border-radius:32px;background:var(--panel);overflow:hidden}
.v-bento>li>b{margin-top:18px;font-size:clamp(19px,1.7vw,22px);font-weight:800}
.v-bento>li>p{margin-top:6px;text-wrap:balance;font-size:15px;line-height:1.5;font-weight:500;color:var(--muted)}
.v-art{position:relative;flex:1;min-height:0;border-radius:22px;background:var(--white);overflow:hidden}
/* 1 flood */
.v-art-flood{background:#B9CCE0}
.fl-win{display:flex;flex-direction:column;justify-content:flex-end;gap:7px;height:100%;padding:16px;overflow:hidden}
.fl{flex:none;align-self:flex-start;height:36px;max-width:85%;padding:0 12px;border-radius:14px;background:var(--white);font-size:14px;font-weight:600;line-height:36px;white-space:nowrap;overflow:hidden}
.fl-me{align-self:flex-end;background:#FEE500}
/* 2 match */
.v-art-match{background:#EEF0F3}
.sw{position:absolute;left:50%;top:44%;width:74%;margin-left:-37%;padding:14px 16px;border-radius:18px;background:var(--white);box-shadow:0 10px 26px rgb(0 0 0 / .1);transform:translateY(-50%)}
.sw small{display:block;margin-bottom:8px;font-size:12px;font-weight:700;color:var(--muted)}
.sw p{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:14px;font-weight:700}
.sw p:first-of-type{border-top:0}
.sw b{font-variant-numeric:tabular-nums}
.sw-bank b{color:#1D4ED8}
.sw-memo{background:#FFF8D6}
.sw-memo p{border-color:#F1E3A0}
.sw-left{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--white);font-size:13px;font-weight:700;white-space:nowrap}
/* 3 call */
.v-art-call{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px}
.cl-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#FEF0E7;font-size:14px;font-weight:700}
.cl-row b{margin-left:auto;font-weight:800}
.cl-row em{font-style:normal;padding:4px 9px;border-radius:999px;background:var(--white);color:#B54708;font-size:12px;font-weight:800}
.cl-msg{align-self:flex-end;max-width:88%;padding:12px 14px;border-radius:16px 16px 4px 16px;background:var(--ink);color:var(--white);font-size:14px;font-weight:600;line-height:1.45}
.cl-msg small{display:block;margin-bottom:4px;font-size:12px;color:var(--lime)}
.cl-dots{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.cl-dots i{width:5px;height:5px;border-radius:50%;background:var(--on-dark)}
@media (prefers-reduced-motion:no-preference){
  .v-bento :is(.sw-bank,.sw-memo,.cl-row,.cl-msg,.cl-dots i){animation-duration:6s;animation-iteration-count:infinite;animation-timing-function:var(--ease);animation-fill-mode:both;animation-play-state:paused}
  .js-motion .v-bento.is-play :is(.sw-bank,.sw-memo,.cl-row,.cl-msg,.cl-dots i){animation-play-state:running}
  .sw-bank{animation-name:sw-a}
  .sw-memo{animation-name:sw-b}
  .cl-row{animation-name:cl-row;transform-origin:center}
  .cl-msg{animation-name:cl-msg}
  .cl-dots i{animation-name:cl-dot;animation-duration:1s!important}
  .cl-dots i:nth-child(2){animation-delay:.15s}.cl-dots i:nth-child(3){animation-delay:.3s}
}
@keyframes cl-row{0%,6%{opacity:0;transform:scale(.94)}14%{opacity:1;transform:scale(1.03)}20%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes cl-msg{0%,30%{opacity:0;transform:translateY(14px)}40%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes cl-dot{0%,100%{opacity:.3}50%{opacity:1}}
@media (min-width:760px){.v-bento{grid-template-columns:repeat(3,1fr)}}


@keyframes sw-a{0%,38%{z-index:2;transform:translate(-6%,-50%) rotate(-3deg)}46%,88%{z-index:1;transform:translate(6%,-46%) rotate(3deg) scale(.94)}96%,100%{z-index:2;transform:translate(-6%,-50%) rotate(-3deg)}}
@keyframes sw-b{0%,38%{z-index:1;transform:translate(6%,-46%) rotate(3deg) scale(.94)}46%,88%{z-index:2;transform:translate(-6%,-50%) rotate(-3deg)}96%,100%{z-index:1;transform:translate(6%,-46%) rotate(3deg) scale(.94)}}


.v-kakao-foot{flex:none;display:flex;justify-content:center;padding:0 16px 20px}
.v-kakao-foot .v-kakao-pill{margin:0}

/* Kakao chat, drawn like the real app */
.v-kakao{display:flex;flex-direction:column;width:100%;max-width:360px;aspect-ratio:9 / 16;margin:0 auto;border-radius:32px;overflow:hidden;background:#BACEE0;box-shadow:0 20px 50px rgb(0 0 0 / .14)}
.v-kakao-top{flex:none;display:flex;align-items:center;justify-content:space-between;padding:18px 18px 10px;color:#1E1E1E}
.v-kakao-top b{font-size:16px;font-weight:700}
.v-kakao-top .icon{width:22px;height:22px;stroke-width:2}
.v-kakao-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding:4px 14px 12px;overflow:hidden}
.kd{align-self:center;margin-bottom:4px;padding:5px 12px;border-radius:999px;background:#5E6F82;color:var(--white);font-size:11.5px;font-weight:600}
.kr{display:flex;align-items:flex-end;gap:6px}
.kr p{max-width:76%;margin:0;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.42;font-weight:500;color:#1E1E1E;word-break:keep-all}
.kr.me{justify-content:flex-end}
.kr.me p{position:relative;background:#FEE500;border-top-right-radius:4px}
.kr.you{align-items:flex-start;gap:8px}
.ka{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:14px;background:var(--lime);font-size:14px;font-style:normal;font-weight:800}
.kr.you>div{display:grid;gap:4px;min-width:0}
.kn{font-size:12px;font-weight:600;color:#4A5568}
.kb{display:flex;align-items:flex-end;gap:6px}
.kb p{max-width:none;background:var(--white);border-top-left-radius:4px}
.kt{flex:none;display:grid;justify-items:end;font-size:10.5px;font-weight:500;color:#3E4A5A;white-space:nowrap}
.kt em{font-style:normal;font-weight:800;color:#E2B400;font-size:10.5px}
.kr.me .kt{justify-items:end}
.kb .kt{justify-items:start}
@media (max-width:359px){.v-kakao-body{gap:7px;padding:6px 10px}.kr p{padding:7px 10px;font-size:12.5px}.ka{width:30px;height:30px;font-size:12px;border-radius:12px}.kd{font-size:10.5px}.v-kakao-pill{font-size:12px}}

/* how it works: four square tiles that play one after another (8s loop, 2s each) */
.v-how{display:grid;gap:12px;margin-top:40px}
.v-how>.hw{aspect-ratio:1;display:flex;flex-direction:column;gap:clamp(12px,1.4vw,16px);padding:clamp(20px,2.4vw,28px);border-radius:clamp(32px,3vw,40px);background:var(--panel);box-shadow:0 0 0 3px transparent;--z:1}
.hw-text h3{font-size:clamp(20px,2.3vw,28px);line-height:1.3;letter-spacing:-.04em;font-weight:700}
.hw-text p{margin-top:4px;font-size:clamp(14px,1.2vw,16px);font-weight:600;color:var(--muted)}
.v-how .v-art{border-radius:clamp(22px,2.2vw,28px)}
.v-how .v-art>*{zoom:var(--z)}
.hw-voice{display:flex;flex-direction:column;justify-content:space-between;padding:16px;background:var(--ink);color:var(--white)}
.hw-voice small{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--lime)}
.hw-voice small i{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.hw-wave{display:flex;align-items:center;justify-content:center;gap:5px;height:44px}
.hw-wave i{width:5px;height:100%;border-radius:3px;background:var(--lime);transform:scaleY(.2)}
.hw-quote{font-size:15px;font-weight:700;line-height:1.4}
.hw-page{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px;overflow:hidden}
.hw-row{position:relative;display:flex;align-items:center;gap:10px;padding:7px;border-radius:14px;background:var(--panel);font-size:12px;font-weight:600;color:var(--muted)}
.hw-row img,.hw-row i{flex:none;width:38px;height:38px;border-radius:10px;object-fit:cover;object-position:55% 35%}
.hw-row span{display:grid;min-width:0}
.hw-row b{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-row em{position:absolute;right:10px;padding:3px 8px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:11px;font-style:normal;font-weight:800}
.hw-new{background:var(--lime-wash)}
.hw-form{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px}
.hw-f{display:grid;gap:2px;padding:8px 12px;border-radius:12px;background:var(--panel);min-height:48px}
.hw-f small{font-size:11px;font-weight:700;color:var(--muted)}
.hw-f b{font-size:14px;font-weight:700}
.hw-btn{display:grid;margin-top:4px;border-radius:12px;background:var(--ink);color:var(--white);font-size:14px;font-weight:700;text-align:center}
.hw-btn b{grid-area:1/1;padding:11px}
.hw-b2{color:var(--ink);background:var(--lime);border-radius:12px}
.hw-pay{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px}
.hw-p{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:12px;background:var(--panel);font-size:14px;font-weight:700}
.hw-p b{margin-left:auto;font-variant-numeric:tabular-nums}
.st{display:grid;font-style:normal}
.st em{grid-area:1/1;justify-self:end;padding:4px 9px;border-radius:999px;background:var(--white);color:var(--muted);font-size:11.5px;font-style:normal;font-weight:800;white-space:nowrap}
.st .ok{background:var(--lime);color:var(--ink)}
.st .warn{background:#FEF0E7;color:#B54708}
@media (prefers-reduced-motion:no-preference){
  .v-how :is(.hw,.hw-wave i,.hw-quote,.hw-new,.hw-v1,.hw-v2,.hw-b2,.hw-btn,.s1,.hw-p2){animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:var(--ease);animation-fill-mode:both;animation-play-state:paused}
  .js-motion .v-how.is-play :is(.hw,.hw-wave i,.hw-quote,.hw-new,.hw-v1,.hw-v2,.hw-b2,.hw-btn,.s1,.hw-p2){animation-play-state:running}
  .hw1{animation-name:hw-on1}.hw2{animation-name:hw-on2}.hw3{animation-name:hw-on3}.hw4{animation-name:hw-on4}
  .hw-wave i{animation-name:hw-wave;animation-duration:.9s!important;animation-timing-function:ease-in-out!important}
  .hw-wave i:nth-child(2){animation-delay:.1s}.hw-wave i:nth-child(3){animation-delay:.2s}.hw-wave i:nth-child(4){animation-delay:.3s}.hw-wave i:nth-child(5){animation-delay:.2s}.hw-wave i:nth-child(6){animation-delay:.1s}
  .hw-quote{animation-name:hw-quote}
  .hw-new{animation-name:hw-new}
  .hw-v1{animation-name:hw-v1}.hw-v2{animation-name:hw-v2}
  .hw-btn{animation-name:hw-press}.hw-b2{animation-name:hw-b2}
  .hw4 .s1.ok{animation-name:hw-s1}.hw4 .s1.warn{animation-name:hw-s2}
  .hw-p2{animation-name:hw-p2}
}
@keyframes hw-on1{0%,24%{box-shadow:0 0 0 3px var(--lime)}28%,100%{box-shadow:0 0 0 3px transparent}}
@keyframes hw-on2{0%,24%{box-shadow:0 0 0 3px transparent}26%,49%{box-shadow:0 0 0 3px var(--lime)}53%,100%{box-shadow:0 0 0 3px transparent}}
@keyframes hw-on3{0%,49%{box-shadow:0 0 0 3px transparent}51%,74%{box-shadow:0 0 0 3px var(--lime)}78%,100%{box-shadow:0 0 0 3px transparent}}
@keyframes hw-on4{0%,74%{box-shadow:0 0 0 3px transparent}76%,97%{box-shadow:0 0 0 3px var(--lime)}100%{box-shadow:0 0 0 3px transparent}}
@keyframes hw-wave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes hw-quote{0%,3%{opacity:0;transform:translateY(8px)}12%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hw-new{0%,25%{opacity:0;transform:translateY(-14px) scale(.96);margin-bottom:-53px}31%,96%{opacity:1;transform:none;margin-bottom:0}100%{opacity:0;margin-bottom:0}}
@keyframes hw-v1{0%,52%{opacity:0}56%,96%{opacity:1}100%{opacity:0}}
@keyframes hw-v2{0%,58%{opacity:0}62%,96%{opacity:1}100%{opacity:0}}
@keyframes hw-press{0%,65%{transform:none}67%{transform:scale(.95)}69%,100%{transform:none}}
@keyframes hw-b2{0%,68%{opacity:0}71%,96%{opacity:1}100%{opacity:0}}
@keyframes hw-s1{0%,78%{opacity:0;transform:scale(.7)}82%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hw-s2{0%,85%{opacity:0;transform:scale(.7)}89%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hw-p2{0%,85%{background:var(--panel)}89%,96%{background:#FFFBF5}100%{background:var(--panel)}}
@media (min-width:760px){.v-how{grid-template-columns:repeat(2,1fr)}.v-how>.hw{--z:1.1}}
@media (min-width:1000px){.v-how{gap:16px}.v-how>.hw{aspect-ratio:16 / 11.5;--z:1.1}}

/* step 1 uses the v1 live capture scene */
.hw-live{display:flex;container-type:inline-size;--u:clamp(.82px,calc(100cqi / 400),1.2px);background:none}
.v-how .hw-live>*{zoom:1}
.hw-live .live-mock{flex:1;border-radius:inherit}
.hw-live .video{align-items:flex-start}
.hw-cmd{position:absolute;z-index:1;left:calc(12 * var(--u));right:calc(12 * var(--u));bottom:calc(10 * var(--u));display:flex;align-items:center;gap:calc(8 * var(--u));padding:calc(8 * var(--u)) calc(12 * var(--u));border-radius:calc(12 * var(--u));background:rgb(0 0 0 / .62);color:var(--white);font-size:max(11px,calc(14 * var(--u)));font-weight:700;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hw-cmd .wave i{background:var(--lime)}
.hw-live .chat{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:calc(10 * var(--u));background:none}
@media (prefers-reduced-motion:no-preference){
  .hw-live :is(.focus,.snap,.reg,.hw-cmd){animation-duration:8s;animation-iteration-count:infinite;animation-fill-mode:both;animation-play-state:paused}
  .js-motion .v-how.is-play .hw-live :is(.focus,.snap,.reg,.hw-cmd){animation-play-state:running}
  .hw-live .hw-cmd{animation-name:hw-cmd;animation-timing-function:var(--ease)}
  .hw-live .focus{animation-name:hw-focus;animation-timing-function:var(--ease)}
  .hw-live .snap{animation-name:hw-snap;animation-timing-function:cubic-bezier(.5,0,.2,1)}
  .hw-live .reg{animation-name:hw-reg;animation-timing-function:var(--ease)}
}
@keyframes hw-cmd{0%{opacity:0;transform:translateY(8px)}3%,20%{opacity:1;transform:none}22.5%,100%{opacity:0;transform:none}}
@keyframes hw-focus{0%,3%{opacity:0;transform:scale(1.25)}7%,12%{opacity:1;transform:none}14%,100%{opacity:0;transform:none}}
@keyframes hw-snap{0%,11%{opacity:0;transform:scale(.7)}14%,16%{opacity:1;transform:none}21%{opacity:1;transform:translateY(var(--fly)) scale(.5)}22%,100%{opacity:0;transform:translateY(var(--fly)) scale(.5)}}
@keyframes hw-reg{0%,20.5%{opacity:0;transform:translateY(8px)}23%,96%{opacity:1;transform:none}100%{opacity:0}}
.hw-live .focus{top:7%;bottom:27%}
@media (min-width:900px){.is-floating .head-bar{max-width:1120px}}
.hw-live .video b{background:#D92D20;color:var(--white);font-weight:800;letter-spacing:.02em}

.closing{margin-top:clamp(168px,20vw,280px)}
.v-dark h2 .blue{color:var(--lime)}
.kr img.ka{padding:4px;background:var(--white);object-fit:contain}
/* hero art: vertical live stream with the shopper page card overlapping its left edge */
.v-hero-art{display:flex;justify-content:flex-end;padding:0}
.v-stage{width:min(76%,380px);aspect-ratio:9 / 16}
.v-stage img{object-position:50% 40%}
.v-voice{left:14px;right:14px;max-width:none;top:56px}
.v-done{left:14px;right:14px;justify-content:center}
.v-phone{left:0;right:auto;bottom:12%;width:min(48%,230px)}
@media (max-width:759px){
  .v-stage{width:74%}
  .v-voice{left:10px;right:10px;max-width:none;top:48px}
  .v-done{left:10px;right:10px}
  .v-phone{width:50%;bottom:10%}
}
img.v-av{padding:5px;background:var(--lime-wash);object-fit:contain}

.v-dark .v-how>li{color:var(--ink)}
.v-dark .v-how{margin-top:44px}
.v-try{display:grid;justify-items:center;gap:18px;margin-top:clamp(80px,9vw,128px);text-align:center}
.v-try p{font-size:clamp(17px,1.6vw,20px);font-weight:600;color:var(--on-dark)}
.v-try .btn-lime{gap:10px;width:auto;height:64px;margin:0;padding:0 30px 0 34px;border-radius:22px;font-size:18px}
.v-try .btn-lime .icon{width:22px;height:22px;stroke-width:2.4}


/* chatbot section: live chat where the bot answers product questions */
.v-bot{display:grid;gap:40px;align-items:center}
.v-livechat{display:flex;flex-direction:column;width:100%;max-width:380px;aspect-ratio:9 / 16;margin:0 auto;border-radius:22px;overflow:hidden;background:#0F0F0F;color:#F1F1F1;box-shadow:0 24px 60px rgb(0 0 0 / .22)}
.yt-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:14px 14px 12px 18px;border-bottom:1px solid #272727}
.yt-head b{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:700}
.yt-head svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.yt-head span{display:flex;gap:14px}
.yt-head span svg:first-child{fill:currentColor;stroke:none}
.lc-list{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:10px 14px;overflow:hidden}
.yc{display:flex;align-items:flex-start;gap:10px}
.yc>i,.yc>img{flex:none;width:24px;height:24px;border-radius:50%}
.yc>i{display:grid;place-items:center;color:var(--white);font-size:10px;font-style:normal;font-weight:800}
.yc>img{padding:2px;background:var(--lime)}
.yc p{min-width:0;font-size:13px;font-weight:500;line-height:1.45;color:#F1F1F1}
.yc b{margin-right:6px;font-size:12.5px;font-weight:600;color:#AAAAAA}
.yc-bot b{margin-right:3px;color:#3EA6FF}
.yc-v{display:inline-block;width:13px;height:13px;margin-right:5px;vertical-align:-2px;fill:#3EA6FF}
.yc-v .ck{fill:none;stroke:#0F0F0F;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.yc-bot em{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:4px;background:var(--lime);color:var(--ink);font-size:11px;font-style:normal;font-weight:800;vertical-align:1px}
.yt-note{flex:none;margin:4px 12px 8px;padding:9px 12px;border-radius:10px;background:#272727;font-size:11.5px;line-height:1.45;color:#AAAAAA}
.yt-pin{flex:none;display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:9px 12px;border-radius:10px;background:#272727;font-size:12.5px;white-space:nowrap;overflow:hidden}
.yt-pin img{width:22px;height:22px;padding:2px;border-radius:50%;background:var(--lime)}
.yt-pin b{padding:2px 7px;border-radius:999px;background:#F1F1F1;color:#0F0F0F;font-size:11.5px}
.yt-pin span{overflow:hidden;text-overflow:ellipsis}
.yt-input{flex:none;display:flex;align-items:center;justify-content:space-between;margin:0 12px 14px;padding:10px 14px;border-radius:999px;background:#272727;font-size:13px;color:#AAAAAA}
.yt-input svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .lc-list :is(.lc-n1,.lc-n2,.lc-n3,.lc-n4,.lc-n5,.lc-n6){animation-duration:9s;animation-iteration-count:infinite;animation-timing-function:var(--ease);animation-fill-mode:both;animation-play-state:paused}
  .js-motion .v-livechat.is-play .lc-list :is(.lc-n1,.lc-n2,.lc-n3,.lc-n4,.lc-n5,.lc-n6){animation-play-state:running}
  .lc-n1{animation-name:lc1}.lc-n2{animation-name:lc2}.lc-n3{animation-name:lc3}.lc-n4{animation-name:lc4}.lc-n5{animation-name:lc5}.lc-n6{animation-name:lc6}
}
@keyframes lc1{0%{opacity:0;transform:translateY(10px)}4%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes lc2{0%,12%{opacity:0;transform:translateY(10px)}16%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes lc3{0%,28%{opacity:0;transform:translateY(10px)}32%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes lc4{0%,40%{opacity:0;transform:translateY(10px)}44%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes lc5{0%,56%{opacity:0;transform:translateY(10px)}60%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes lc6{0%,68%{opacity:0;transform:translateY(10px)}72%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@media (min-width:1000px){.v-bot{grid-template-columns:1fr 440px;gap:80px}}

/* seller dashboard, refined */
.v-table{padding:10px;border:1px solid var(--line);background:var(--white);box-shadow:0 20px 50px rgb(0 0 0 / .06)}
.v-table-head{padding:12px 12px 14px}
.v-table-head small{font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.v-stats{padding:0 4px}
.v-stats div{background:var(--panel)}
.v-stats b small{margin-left:2px;font-size:14px;font-weight:700;color:var(--muted)}
.v-stats .is-ok{background:var(--lime-wash)}
.v-stats .is-ok b{color:#3F6212}
.v-stats .is-warn{background:#FEF0E7}
.v-stats .is-warn b{color:#B54708}
.v-progress{display:flex;align-items:center;gap:12px;margin:12px 6px 4px;padding:0 6px;font-size:13px;font-weight:700;color:var(--muted)}
.v-progress i{flex:1;height:8px;border-radius:999px;background:var(--panel);overflow:hidden}
.v-progress em{display:block;width:75%;height:100%;border-radius:inherit;background:var(--lime)}
.v-progress b{color:var(--ink);font-variant-numeric:tabular-nums}
.v-table .v-filters{display:flex;gap:6px;padding:10px 6px 4px}
.v-table .v-filters i{padding:7px 12px;border-radius:999px;background:var(--panel);font-size:13px;font-style:normal;font-weight:700;color:var(--muted)}
.v-table .v-filters i.on{background:var(--ink);color:var(--white)}
.v-rows .v-row{background:var(--white);border:1px solid var(--line)}
.v-rows .v-row.is-warn{background:#FFFBF5;border-color:#FBE3CF}
.v-rows .v-row-h{border:0}
.who{display:flex;align-items:center;gap:8px}
.who .av{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;color:var(--white);font-size:11px;font-style:normal;font-weight:800}
.who>span{display:grid}
.v-row .prod{display:flex!important;align-items:center;gap:8px}
.prod img,.prod>i{flex:none;width:28px;height:28px;border-radius:8px;object-fit:cover;object-position:55% 35%}
.dep{display:grid!important;gap:1px}
.dep small{font-size:11.5px;font-weight:700;color:#B54708}
.st2{display:grid}
.st2 i{grid-area:1/1;justify-self:start}
.fl0,.fl1{grid-area:1/1}
.ad-flip .dep{display:grid!important}
@media (prefers-reduced-motion:no-preference){
  .v-table :is(.v-progress em,.s-a,.s-b,.fl0,.fl1,.ad-flip){animation-duration:6s;animation-iteration-count:infinite;animation-timing-function:var(--ease);animation-fill-mode:both;animation-play-state:paused}
  .js-motion .v-table.is-play :is(.v-progress em,.s-a,.s-b,.fl0,.fl1,.ad-flip){animation-play-state:running}
  .v-progress em{animation-name:ad-bar}
  .s-a,.fl0{animation-name:ad-out}.s-b,.fl1{animation-name:ad-in}
  .ad-flip{animation-name:ad-row}
}
@keyframes ad-bar{0%,38%{width:75%}48%,92%{width:79%}100%{width:75%}}
@keyframes ad-out{0%,38%{opacity:1}44%,92%{opacity:0}98%,100%{opacity:1}}
@keyframes ad-in{0%,38%{opacity:0;transform:scale(.8)}46%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes ad-row{0%,38%{background:var(--white)}44%{background:var(--lime-wash)}60%,100%{background:var(--white)}}
@media (min-width:760px){.v-row{grid-template-columns:56px 1.4fr 1.5fr 80px 1.5fr 96px}}
@media (max-width:759px){.who .av{display:none}.v-table .v-filters{display:none}}
.nx{display:inline-grid;vertical-align:baseline}
.nx>data{grid-area:1/1;display:block;justify-self:start}

/* hero device: a detailed phone showing the demo shopper page */
.v-device{position:absolute;z-index:2;left:0;bottom:8%;width:min(48%,236px);aspect-ratio:9 / 19.5;padding:7px;border-radius:44px;background:linear-gradient(145deg,#3A3A3C,#1C1C1E 40%,#2C2C2E);box-shadow:0 0 0 1.5px #0A0A0A inset,0 30px 60px rgb(0 0 0 / .28),0 6px 16px rgb(0 0 0 / .18)}
.dv-btn{position:absolute;width:3px;border-radius:2px;background:#2C2C2E}
.dv-act{left:-2px;top:17%;height:5%}.dv-vol1{left:-2px;top:25%;height:9%}.dv-vol2{left:-2px;top:36%;height:9%}.dv-pwr{right:-2px;top:28%;height:14%}
.dv-screen{position:relative;width:100%;height:100%;border-radius:37px;overflow:hidden;background:var(--white);container-type:inline-size}
.dv-status{position:absolute;z-index:3;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:calc(12cqi + 6px);padding:0 9cqi;background:var(--white);font-size:max(9px,5.4cqi)}
.dv-status b{font-weight:700;letter-spacing:-.01em}
.dv-island{position:absolute;left:50%;top:3.2cqi;width:30cqi;height:9cqi;margin-left:-15cqi;border-radius:999px;background:#000}
.dv-icons{display:flex;align-items:center;gap:1.6cqi}
.dv-icons svg{height:4.2cqi;fill:var(--ink)}
.dv-bat{position:relative;display:block;width:9.5cqi;height:4.6cqi;padding:.6cqi;border:1px solid rgb(0 0 0 / .45);border-radius:1.4cqi}
.dv-bat i{display:block;width:80%;height:100%;border-radius:.8cqi;background:var(--ink)}
.dv-home{position:absolute;z-index:3;left:50%;bottom:2.2cqi;width:36cqi;height:1.5cqi;margin-left:-18cqi;border-radius:999px;background:#111}
/* demo page in miniature: all sizes are % of the screen width (1cqi = 3.9px at a 390px phone) */
.dm{position:absolute;inset:calc(12cqi + 6px) 0 0;overflow:hidden}
.dm-scroll{padding:6cqi 5cqi 30cqi}
.dm-profile{display:grid;justify-items:center;text-align:center}
.dm-profile img{width:21cqi;height:21cqi;padding:3cqi;border-radius:50%;background:var(--lime-wash)}
.dm-profile b{margin-top:3cqi;font-size:6.2cqi;font-weight:800}
.dm-profile span{font-size:3.8cqi;font-weight:600;color:var(--muted)}
.dm-profile p{margin-top:2.4cqi;font-size:3.8cqi;font-weight:600}
.dm-live{position:relative;margin-top:6cqi;aspect-ratio:9 / 12;border-radius:7cqi;overflow:hidden;background:var(--ink)}
.dm-live img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.dm-live em{position:absolute;left:4cqi;top:4cqi;padding:1.2cqi 2.6cqi;border-radius:2.2cqi;background:#D92D20;color:var(--white);font-size:3.4cqi;font-style:normal;font-weight:800}
.dm-live span{position:absolute;left:3.5cqi;right:3.5cqi;bottom:3.5cqi;display:flex;justify-content:space-between;align-items:center;padding:3.5cqi 4cqi;border-radius:4.6cqi;background:var(--white);font-size:3.4cqi;font-weight:700;color:var(--muted)}
.dm-live span b{font-size:4cqi;color:var(--ink)}
.dm-h{display:block;margin-top:8cqi;font-size:4.6cqi;font-weight:800}
.dm-list{display:grid;gap:2.6cqi;margin-top:3.5cqi}
.dm-p{display:flex;align-items:center;gap:3.5cqi;padding:2.6cqi;border-radius:4.6cqi;background:var(--panel)}
.dm-p img,.dm-p>i{flex:none;width:16cqi;height:16cqi;border-radius:3.6cqi;object-fit:cover;object-position:55% 35%}
.dm-p span{flex:1;min-width:0;display:grid;font-size:3.8cqi;font-weight:600;color:var(--muted)}
.dm-p b{font-size:4.1cqi;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-p em{flex:none;padding:1.8cqi 3cqi;border-radius:999px;background:var(--ink);color:var(--white);font-size:3.2cqi;font-style:normal;font-weight:700}
.dm-p em.new{background:var(--lime);color:var(--ink)}
.dm-tabs{position:absolute;left:0;right:0;bottom:0;display:flex;gap:1.6cqi;padding:2.4cqi 4cqi 7cqi;background:var(--white);box-shadow:0 -1px 0 var(--line)}
.dm-tabs>*{flex:1;display:grid;place-items:center;height:11cqi;border-radius:3.6cqi;font-size:3.8cqi;font-weight:700;color:var(--muted)}
.dm-tabs b{background:var(--ink);color:var(--white)}
@media (prefers-reduced-motion:no-preference){
  .v-hero-art :is(.dm-scroll,.dm-new){animation-duration:7s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.65,0,.35,1);animation-fill-mode:both;animation-play-state:paused}
  .js-motion .v-hero-art.is-play :is(.dm-scroll,.dm-new){animation-play-state:running}
  .v-hero-art .dm-scroll{animation-name:dm-scroll}
  .v-hero-art .dm-new{animation-name:dm-new;animation-timing-function:var(--ease)}
}
@keyframes dm-scroll{0%,22%{transform:none}36%,92%{transform:translateY(-96cqi)}100%{transform:none}}
@keyframes dm-new{0%,40%{opacity:0;max-height:0;padding-block:0;margin-bottom:-2.6cqi;transform:scale(.95)}48%{opacity:0;max-height:24cqi;padding-block:2.6cqi;margin-bottom:0;transform:scale(.95)}54%,92%{opacity:1;max-height:24cqi;padding-block:2.6cqi;margin-bottom:0;transform:none;background:var(--lime-wash)}100%{opacity:1;max-height:24cqi;padding-block:2.6cqi;margin-bottom:0}}
@media (max-width:759px){.v-device{width:50%;bottom:6%;padding:5px;border-radius:32px}.dv-screen{border-radius:27px}}
.v-device{width:min(44%,214px);bottom:-3%}
.v-hero-art{padding-bottom:28px}
@media (max-width:759px){.v-device{width:46%;bottom:-2%}}
@media (max-width:759px){.v-done{left:auto;right:10px}.v-done-pre{display:none}}
/* phone polish: titanium frame with a thin black bezel, iOS-like status bar */
.v-device{padding:3px;border-radius:46px;background:linear-gradient(160deg,#8E8E93 0%,#48484A 18%,#2C2C2E 50%,#48484A 82%,#7C7C80 100%);box-shadow:0 30px 60px rgb(0 0 0 / .26),0 6px 16px rgb(0 0 0 / .16)}
.v-device::before{content:'';position:absolute;inset:3px;border-radius:43px;background:#050505}
.dv-screen{position:absolute;inset:8px;width:auto;height:auto;border-radius:36px}
.dv-btn{background:linear-gradient(90deg,#5A5A5E,#2C2C2E)}
.dv-status{height:15cqi;padding:0 7.5cqi 0 11cqi;align-items:flex-start;padding-top:4.3cqi;background:transparent;font-size:5.1cqi}
.dv-status b{font-weight:600;letter-spacing:-.02em;line-height:1}
.dv-island{top:3cqi;width:28cqi;height:8.4cqi;margin-left:-14cqi}
.dv-icons{gap:1.5cqi;margin-top:.4cqi}
.dv-icons svg{height:3.4cqi}
.dv-bat{width:7.6cqi;height:3.6cqi;padding:.45cqi;border-width:1px;border-radius:1.2cqi}
.dv-bat::after{content:'';position:absolute;right:-1.2cqi;top:50%;width:.7cqi;height:1.4cqi;margin-top:-.7cqi;border-radius:0 .5cqi .5cqi 0;background:rgb(0 0 0 / .45)}
.dv-bat i{width:85%;border-radius:.6cqi}
.dm{inset:0}
.dm-scroll{padding-top:16cqi}
.dv-home{bottom:2cqi;width:34cqi;height:1.3cqi;margin-left:-17cqi;background:#0A0A0A}
.dm-tabs{padding-bottom:6.5cqi}
@media (max-width:759px){.v-device{padding:2px;border-radius:34px}.v-device::before{inset:2px;border-radius:32px}.dv-screen{inset:6px;border-radius:27px}}
.dv-status{padding:5cqi 10cqi 0 12cqi;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.dv-island{top:3.2cqi}
.dv-bat{overflow:visible}

/* hero voice bubble: live transcription, words land one by one */
.v-voice small{display:flex;align-items:center;gap:6px;color:#3F6212}
.v-wave{display:inline-flex;align-items:center;gap:2px;height:12px}
.v-wave i{width:3px;height:100%;border-radius:2px;background:var(--lime-text);transform:scaleY(.35)}
.v-voice small>span:not(.v-wave){grid-area:auto}
.vl-a,.vl-b{white-space:nowrap}
.v-tr{margin:0}
.v-caret{display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.15em;background:var(--ink)}

/* hero timeline (8s)
   0.0–0.4 caption card in · 0.6–2.4 words land, keywords in lime · 2.5 "주문 정보 4개를 찾았어요" · 2.55–3.2 chips
   3.15 focus · 3.6 white flash · 3.7 capture card · 4.3–4.8 flies into the phone · 4.8–5.4 phone scrolls · 5.4–5.95 new product · 5.75 registered pill · reset 7.5 */
.v-hero-art{position:relative}
.v-stt{position:absolute;z-index:3;left:12px;right:12px;top:52px;padding:12px 14px 13px;border-radius:18px;background:rgb(12 12 12 / .72);color:var(--white);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.st-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:rgb(255 255 255 / .75)}
.st-mic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--lime)}
.st-mic svg{width:13px;height:13px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.st-lbl{display:inline-grid;flex:1}
.st-lbl>*{grid-area:1/1}
.st-b{color:var(--lime);opacity:0}
.v-stt .v-wave{height:14px;gap:2px}
.v-stt .v-wave i{width:3px;background:var(--lime)}
.st-text{margin-top:8px;font-size:16px;font-weight:700;line-height:1.45;word-break:keep-all}
.st-text .vw{display:inline-block}
.st-text .kw{color:var(--lime)}
.st-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.sc{display:inline-flex;align-items:baseline;gap:4px;padding:4px 9px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:12.5px;font-style:normal;font-weight:800}
.sc small{font-size:10.5px;font-weight:700;color:#3F6212}
.hv-focus{position:absolute;z-index:1;left:20%;right:20%;top:34%;bottom:20%;--l:28px;--w:4px;--g:linear-gradient(var(--lime),var(--lime));background:var(--g) 0 0/var(--l) var(--w),var(--g) 0 0/var(--w) var(--l),var(--g) 100% 0/var(--l) var(--w),var(--g) 100% 0/var(--w) var(--l),var(--g) 0 100%/var(--l) var(--w),var(--g) 0 100%/var(--w) var(--l),var(--g) 100% 100%/var(--l) var(--w),var(--g) 100% 100%/var(--w) var(--l);background-repeat:no-repeat;opacity:0}
.hv-flash{position:absolute;z-index:4;inset:0;background:var(--white);opacity:0;pointer-events:none}
.hv-snap{position:absolute;z-index:5;left:var(--sx,50%);top:var(--sy,40%);display:flex;gap:10px;width:210px;margin:-44px 0 0 -105px;padding:9px;border-radius:18px;background:var(--white);box-shadow:0 14px 34px rgb(0 0 0 / .26);opacity:0;pointer-events:none}
.hv-snap img{width:68px;height:68px;border-radius:12px;object-fit:cover;object-position:55% 35%}
.hv-snap>span{display:grid;align-content:center;gap:3px}
.hv-snap b{font-size:14px}
.hv-snap strong{font-size:17px;font-weight:800}
.hv-snap .sizes{display:flex;gap:4px}
.hv-snap .sizes i{padding:1px 6px;border-radius:6px;background:var(--panel);font-size:11px;font-style:normal;font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .v-hero-art :is(.v-stt,.vw,.st-a,.st-b,.v-wave,.sc,.hv-focus,.hv-flash,.hv-snap,.dm-scroll,.dm-new,.v-done,.v-stage,.v-device){animation-duration:10s!important;animation-iteration-count:infinite;animation-fill-mode:both;animation-delay:0s!important;animation-play-state:paused}
  .js-motion .v-hero-art.is-play :is(.v-stt,.vw,.st-a,.st-b,.v-wave,.sc,.hv-focus,.hv-flash,.hv-snap,.dm-scroll,.dm-new,.v-done,.v-stage,.v-device){animation-play-state:running}
  .v-hero-art .v-stt{animation-name:hv-stt;animation-timing-function:var(--ease)}
  .v-hero-art .vw{animation-timing-function:ease-out}
  .v-hero-art .vw0{animation-name:vw0}.v-hero-art .vw1{animation-name:vw1}.v-hero-art .vw2{animation-name:vw2}.v-hero-art .vw3{animation-name:vw3}.v-hero-art .vw4{animation-name:vw4}.v-hero-art .vw5{animation-name:vw5}.v-hero-art .vw6{animation-name:vw6}.v-hero-art .vw7{animation-name:vw7}.v-hero-art .vw8{animation-name:vw8}.v-hero-art .vw9{animation-name:vw9}
  .v-hero-art .sc0{animation-name:sc0}.v-hero-art .sc1{animation-name:sc1}.v-hero-art .sc2{animation-name:sc2}.v-hero-art .sc3{animation-name:sc3}
  .v-hero-art .sc{animation-timing-function:var(--ease)}
  .v-hero-art .st-a{animation-name:hv-la;animation-timing-function:steps(1,end)}
  .v-hero-art .st-b{animation-name:hv-lb;animation-timing-function:steps(1,end)}
  .v-hero-art .v-stt .v-wave{animation-name:hv-wave;animation-timing-function:linear}
  .v-hero-art .v-stt .v-wave i{animation:tl-wave .8s ease-in-out infinite!important;animation-play-state:paused}
  .js-motion .v-hero-art.is-play .v-stt .v-wave i{animation-play-state:running}
  .v-hero-art .v-stt .v-wave i:nth-child(2){animation-delay:.12s!important}.v-hero-art .v-stt .v-wave i:nth-child(3){animation-delay:.24s!important}.v-hero-art .v-stt .v-wave i:nth-child(4){animation-delay:.36s!important}.v-hero-art .v-stt .v-wave i:nth-child(5){animation-delay:.48s!important}
  .v-hero-art .hv-focus{animation-name:hv-focus;animation-timing-function:var(--ease)}
  .v-hero-art .hv-flash{animation-name:hv-flash;animation-timing-function:ease-out}
  .v-hero-art .hv-snap{animation-name:hv-snap;animation-timing-function:cubic-bezier(.5,0,.2,1)}
  .v-hero-art .dm-scroll{animation-name:hv-scroll;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  .v-hero-art .dm-new{animation-name:hv-new;animation-timing-function:var(--ease)}
  .v-hero-art .v-done{animation-name:hv-done;animation-timing-function:var(--ease)}
  .v-hero-art .v-stage{animation-name:hv-stage;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  .v-hero-art .v-device{animation-name:hv-dev;animation-timing-function:cubic-bezier(.65,0,.35,1)}
}
@media (max-width:759px){.v-stt{left:8px;right:8px;top:44px;padding:9px 11px 10px}.st-text{font-size:13.5px}.sc{font-size:11px;padding:3px 7px}.sc small{font-size:9.5px}.hv-snap{width:170px;margin:-36px 0 0 -85px;padding:7px;gap:8px}.hv-snap img{width:54px;height:54px}.hv-snap strong{font-size:15px}.hv-focus{--l:20px;--w:3px}}
.v-hero-art .v-stage{position:relative;z-index:1;transform-origin:top right}
.v-hero-art .v-device{z-index:3;transform-origin:left bottom}
.v-hero-art .hv-snap{z-index:6}
@media (max-width:759px){.sc small{display:none}.st-chips{flex-wrap:nowrap;gap:4px;margin-top:8px}.sc{padding:3px 7px;white-space:nowrap}.v-stt{top:40px}.st-text{font-size:13px}}
@media (max-width:359px){.v-device{width:40%}}
/* one inset for everything on the live stage: 16px desktop, 12px mobile */
.v-stage-top{left:16px;top:16px}
.v-stt{left:16px;right:16px;top:51px}
.v-done{left:16px;right:16px;bottom:16px}
@media (max-width:759px){
  .v-stage-top{left:12px;top:12px}
  .v-stt{left:12px;right:12px;top:47px;padding:11px 12px 12px}
  .v-done{right:12px;bottom:12px}
}
/* hero swap animates real sizes (no transform scaling), so text and photos are re-rendered sharp at every frame */
.v-hero-art{--dw-s:min(44%,214px);--dw-l:min(64%,310px);--sw-l:min(76%,380px);--sw-s:min(38%,190px)}
.v-hero-art .v-device{width:var(--dw-s);transform:none}
.v-hero-art .v-stage{width:var(--sw-l);align-self:flex-start}
.v-ghost{display:block;flex:none;width:var(--sw-l);aspect-ratio:9 / 16;visibility:hidden}
.v-hero-art .v-stage{position:absolute;top:0;right:0}
@media (max-width:759px){.v-hero-art{--dw-s:46%;--dw-l:63%;--sw-l:74%;--sw-s:37%}}
@media (max-width:359px){.v-hero-art{--dw-s:40%;--dw-l:58%}}
/* keep the phone's tiny text legible: never below ~10px even when the phone is small */
.dm-profile b{font-size:max(13px,6.2cqi)}
.dm-profile span,.dm-profile p{font-size:max(10px,3.8cqi)}
.dm-live em{font-size:max(9px,3.4cqi)}
.dm-live span{font-size:max(9.5px,3.4cqi)}
.dm-live span b{font-size:max(10.5px,4cqi)}
.dm-h{font-size:max(11.5px,4.6cqi)}
.dm-p span{font-size:max(10px,3.8cqi)}
.dm-p b{font-size:max(11px,4.1cqi)}
.dm-p em{font-size:max(9.5px,3.2cqi)}
.dm-tabs>*{font-size:max(10px,3.8cqi)}
.dv-status{font-size:max(10.5px,5.1cqi)}
.dm-profile p{white-space:nowrap}
.dm,.dm *{-webkit-font-smoothing:antialiased}
.dm img{image-rendering:auto}

/* links section: where the shopper page link shows up on YouTube */
.v-bento-2{grid-template-columns:1fr}
.v-bento-2>li{aspect-ratio:auto}
.v-bento-2 .v-art{min-height:300px;background:#0F0F0F;color:#F1F1F1}
.yl-desc{display:flex;flex-direction:column;gap:10px;padding:14px}
.yl-video{position:relative;height:96px;border-radius:12px;overflow:hidden}
.yl-video img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.yl-video em{position:absolute;left:8px;top:8px;padding:2px 6px;border-radius:4px;background:#D92D20;color:var(--white);font-size:11px;font-style:normal;font-weight:800}
.yl-title{font-size:15px;font-weight:700}
.yl-ch{display:flex;align-items:center;gap:8px}
.yl-ch img{width:30px;height:30px;padding:3px;border-radius:50%;background:var(--lime)}
.yl-ch span{flex:1;display:grid;font-size:11.5px;color:#AAAAAA}
.yl-ch span b{font-size:13.5px;color:#F1F1F1}
.yl-ch i{padding:6px 12px;border-radius:999px;background:#F1F1F1;color:#0F0F0F;font-size:12.5px;font-style:normal;font-weight:700}
.yl-box{padding:10px 12px;border-radius:12px;background:#272727;font-size:13px;line-height:1.5}
.yl-box small{display:block;margin-bottom:4px;font-size:12px;font-weight:700;color:#F1F1F1}
.yl-link span{color:#3EA6FF;font-weight:600;padding:1px 2px;border-radius:4px;position:relative}
.yl-link span::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:1px;background:var(--lime);transform:scaleX(0);transform-origin:left}
@media (prefers-reduced-motion:no-preference){.yl-link span::after{animation:yl-hl 6s var(--ease) infinite both;animation-play-state:paused}}
.yl-chat{display:flex;flex-direction:column;gap:12px;padding:14px}
.yl-pin{display:flex;gap:10px;padding:11px 12px;border-radius:12px;background:#272727;font-size:13.5px;line-height:1.45}
.yl-pin svg{flex:none;width:16px;height:16px;margin-top:2px;fill:#AAAAAA}
.yl-pin small{display:block;font-size:11.5px;font-weight:700;color:#AAAAAA}
.yl-pin .yl-link{font-weight:600}
.yl-msgs{display:grid;gap:10px;padding:2px 2px 0}
.yl-msgs li{display:flex;align-items:flex-start;gap:9px}
.yl-msgs i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:var(--white);font-size:10px;font-style:normal;font-weight:800}
.yl-msgs p{font-size:13px;line-height:1.45}
.yl-msgs b{margin-right:6px;font-size:12.5px;font-weight:600;color:#AAAAAA}
@media (prefers-reduced-motion:no-preference){
  .v-bento-2 .yl-msgs li{animation-duration:6s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:var(--ease);animation-play-state:paused}
  .js-motion .v-bento-2.is-play .yl-msgs li,.js-motion .v-bento-2.is-play .yl-link span::after{animation-play-state:running}
  .yl-msgs li:nth-child(1){animation-name:yl-m1}.yl-msgs li:nth-child(2){animation-name:yl-m2}.yl-msgs li:nth-child(3){animation-name:yl-m3}
}
@keyframes yl-hl{0%,15%{transform:scaleX(0)}30%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes yl-m1{0%,10%{opacity:0;transform:translateY(8px)}16%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes yl-m2{0%,32%{opacity:0;transform:translateY(8px)}38%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes yl-m3{0%,54%{opacity:0;transform:translateY(8px)}60%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@media (min-width:760px){.v-bento-2{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.v-bento-2{grid-template-columns:repeat(3,1fr)}}
.yl-plain span{color:#F1F1F1}
.yl-prof{display:flex;flex-direction:column;gap:10px;padding:0 0 14px}
.yp-banner{height:64px;background:linear-gradient(120deg,#C8F55A,#8BC34A 60%,#3F6212)}
.yp-head{display:flex;align-items:center;gap:10px;margin-top:-22px;padding:0 14px}
.yp-head img{width:56px;height:56px;padding:6px;border:3px solid #0F0F0F;border-radius:50%;background:var(--lime)}
.yp-head span{display:grid;padding-top:20px}
.yp-head b{font-size:16px;font-weight:800}
.yp-head small{font-size:11.5px;color:#AAAAAA}
.yp-bio,.yp-links{padding:0 14px;font-size:13px;color:#AAAAAA}
.yp-links{color:#F1F1F1}
.yp-btns{display:flex;gap:8px;padding:0 14px}
.yp-btns i{flex:1;padding:8px;border-radius:999px;background:#F1F1F1;color:#0F0F0F;font-size:13px;font-style:normal;font-weight:700;text-align:center}
.yp-btns i+i{background:#272727;color:#F1F1F1}
.yp-tabs{display:flex;gap:16px;margin-top:auto;padding:10px 14px 0;border-top:1px solid #272727;font-size:13px;color:#AAAAAA}
.yp-tabs b{color:#F1F1F1}

/* hero timeline v3 (12s): live caption → capture → channel profile with the big link → tap → phone grows */
.hv-yt{position:absolute;z-index:7;left:50%;top:47%;width:min(78%,330px);margin-left:calc(min(78%,330px) / -2);border-radius:20px;overflow:hidden;background:#0F0F0F;color:#F1F1F1;box-shadow:0 24px 60px rgb(0 0 0 / .35);opacity:0;pointer-events:none}
.hy-banner{height:52px;background:linear-gradient(120deg,#C8F55A,#8BC34A 60%,#3F6212)}
.hy-head{display:flex;align-items:center;gap:10px;margin-top:-20px;padding:0 16px}
.hy-head img{width:54px;height:54px;padding:6px;border:3px solid #0F0F0F;border-radius:50%;background:var(--lime)}
.hy-head span{display:grid;padding-top:20px}
.hy-head b{font-size:17px;font-weight:800}
.hy-head small{font-size:12px;color:#AAAAAA}
.hy-bio{margin:8px 16px 0;font-size:13px;color:#AAAAAA}
.hy-link{position:relative;display:flex;align-items:center;gap:8px;margin:10px 12px 0;padding:12px 14px;border-radius:14px;background:#1F1F1F;font-size:clamp(16px,1.5vw,19px);font-weight:800}
.hy-link svg{flex:none;width:20px;height:20px;fill:none;stroke:#3EA6FF;stroke-width:2.2;stroke-linecap:round}
.hy-link span{color:#3EA6FF;white-space:nowrap}
.hy-tap{position:absolute;right:22%;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:rgb(255 255 255 / .35);opacity:0}
.hy-btns{display:flex;gap:8px;padding:12px 16px 16px}
.hy-btns i{flex:1;padding:9px;border-radius:999px;background:#F1F1F1;color:#0F0F0F;font-size:13px;font-style:normal;font-weight:700;text-align:center}
.hy-btns i+i{background:#272727;color:#F1F1F1}
@media (prefers-reduced-motion:no-preference){
  .v-hero-art :is(.v-stt,.vw,.st-a,.st-b,.v-wave,.sc,.hv-focus,.hv-flash,.hv-snap,.hv-yt,.hy-link span,.hy-tap,.dm-scroll,.dm-new,.v-done,.v-stage,.v-device){animation-duration:12s!important;animation-iteration-count:infinite;animation-fill-mode:both;animation-delay:0s!important;animation-play-state:paused}
  .js-motion .v-hero-art.is-play :is(.v-stt,.vw,.st-a,.st-b,.v-wave,.sc,.hv-focus,.hv-flash,.hv-snap,.hv-yt,.hy-link span,.hy-tap,.dm-scroll,.dm-new,.v-done,.v-stage,.v-device){animation-play-state:running}
  .v-hero-art .hv-yt{animation-name:hv-yt;animation-timing-function:var(--ease)}
  .v-hero-art .hy-link span{animation-name:hv-link;animation-timing-function:ease-in-out}
  .v-hero-art .hy-tap{animation-name:hv-tap;animation-timing-function:ease-out}
}
@keyframes vw0{0%,5.00%{opacity:0;transform:translateY(5px)}6.00%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes vw1{0%,6.58%{opacity:0;transform:translateY(5px)}7.58%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes vw2{0%,8.17%{opacity:0;transform:translateY(5px)}9.17%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes vw3{0%,9.75%{opacity:0;transform:translateY(5px)}10.75%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes vw4{0%,11.33%{opacity:0;transform:translateY(5px)}12.33%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes vw5{0%,12.92%{opacity:0;transform:translateY(5px)}13.92%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes vw6{0%,14.50%{opacity:0;transform:translateY(5px)}15.50%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes vw7{0%,16.08%{opacity:0;transform:translateY(5px)}17.08%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes vw8{0%,17.67%{opacity:0;transform:translateY(5px)}18.67%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes vw9{0%,19.25%{opacity:0;transform:translateY(5px)}20.25%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes sc0{0%,21.25%{opacity:0;transform:translateY(8px) scale(.9)}22.75%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes sc1{0%,22.50%{opacity:0;transform:translateY(8px) scale(.9)}24.00%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes sc2{0%,23.75%{opacity:0;transform:translateY(8px) scale(.9)}25.25%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes sc3{0%,25.00%{opacity:0;transform:translateY(8px) scale(.9)}26.50%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes hv-stt{0%{opacity:0;transform:translateY(10px) scale(.97)}3.33%,94%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes hv-la{0%,20.83%{opacity:1}21.00%,100%{opacity:0}}
@keyframes hv-lb{0%,20.83%{opacity:0}21.00%,94%{opacity:1}97%,100%{opacity:0}}
@keyframes hv-wave{0%,20.42%{opacity:1}21.25%,100%{opacity:0}}
@keyframes hv-focus{0%,26.25%{opacity:0;transform:scale(1.18)}28.75%,30.42%{opacity:1;transform:none}32.08%,100%{opacity:0;transform:none}}
@keyframes hv-flash{0%,30.00%{opacity:0}30.50%{opacity:.9}33.33%,100%{opacity:0}}
@keyframes hv-snap{0%,30.67%{opacity:0;transform:scale(.7)}32.50%,37.50%{opacity:1;transform:none}40.00%,100%{opacity:0;transform:scale(.85)}}
@keyframes hv-link{0%,44.17%{transform:none}46.25%{transform:scale(1.06)}48.33%,100%{transform:none}}
@keyframes hv-tap{0%,48.75%{opacity:0;transform:scale(.3)}49.58%{opacity:1;transform:scale(1)}52.50%,100%{opacity:0;transform:scale(1.8)}}
@keyframes hv-scroll{0%,58.33%{margin-top:0}63.33%,95%{margin-top:-96cqi}100%{margin-top:0}}
@keyframes hv-new{0%,63.33%{opacity:0;max-height:0;padding-block:0;margin-bottom:-2.6cqi}65.83%{opacity:0;max-height:24cqi;padding-block:2.6cqi;margin-bottom:0}67.92%,95%{opacity:1;max-height:24cqi;padding-block:2.6cqi;margin-bottom:0;background:var(--lime-wash)}98%,100%{opacity:0;max-height:0;padding-block:0;margin-bottom:-2.6cqi}}
@keyframes hv-done{0%,100%{opacity:0}}
.hy-link span{display:inline-block;transform-origin:left center}
@media (max-width:759px){.hv-yt{width:84%;margin-left:-42%;top:40%}.hy-link{font-size:15px;padding:10px 12px}}
/* channel profile as a third screen in the composition: always there, steps forward for the link tap */
.hv-yt{left:auto;right:4%;top:auto;bottom:0;width:min(46%,232px);margin:0;aspect-ratio:9 / 16;z-index:2;opacity:1;border:6px solid #1C1C1E;border-radius:28px;box-shadow:0 20px 44px rgb(0 0 0 / .28);transform-origin:right bottom}
.hy-banner{height:16%}
.hy-head{margin-top:-7%;padding:0 7%}
.hy-head img{width:24%;height:auto;aspect-ratio:1}
.hy-head b{font-size:clamp(13px,1.3vw,16px)}
.hy-head small{font-size:11px}
.hy-bio{margin:6px 7% 0;font-size:11.5px}
.hy-link{margin:8px 5% 0;padding:9px 10px;font-size:clamp(12.5px,1.15vw,15px);gap:6px;border-radius:12px}
.hy-link svg{width:16px;height:16px}
.hy-btns{padding:8px 5% 0}
.hy-btns i{padding:6px;font-size:11.5px}
.hy-tabs{display:flex;gap:12px;margin:10px 5% 0;padding-top:8px;border-top:1px solid #272727;font-size:11.5px;color:#AAAAAA}
.hy-tabs b{color:#F1F1F1}
.hy-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 5% 0}
.hy-grid span{position:relative;aspect-ratio:9 / 12;border-radius:8px;overflow:hidden}
.hy-grid img,.hy-grid i{display:block;width:100%;height:100%;object-fit:cover}
.hy-grid em{position:absolute;left:5px;top:5px;padding:1px 5px;border-radius:4px;background:#D92D20;color:#fff;font-size:9px;font-style:normal;font-weight:800}
@media (max-width:759px){.hv-yt{width:44%;right:2%;border-width:4px;border-radius:20px;top:auto;margin:0}.hy-link{font-size:11.5px;padding:7px 8px}.hy-bio,.hy-tabs{font-size:10px}.hy-btns i{font-size:10px}}
.hy-link{font-size:clamp(11px,1vw,13.5px);letter-spacing:-.03em}
.hy-link span{min-width:0;white-space:normal;overflow-wrap:normal;line-height:1.25}
@media (max-width:759px){.hy-link{font-size:11px;padding:7px}.hy-link svg{width:13px;height:13px}}
@media (max-width:759px){.hy-sub{display:none}}
.hy-head small{display:block}

/* hero triangle: live (top, front first) · channel profile phone (bottom left) · shopper phone (bottom right) */
.v-hero-art{--sw-l:58%;--dw-s:36%;--dw-l:60%;--yw-s:36%;--yw-l:60%}
.v-ghost{width:100%;aspect-ratio:10 / 13}
.v-hero-art .v-stage{position:absolute;top:0;left:50%;right:auto;width:var(--sw-l);margin-left:calc(var(--sw-l) / -2);z-index:5;transform-origin:50% 0}
.v-hero-art .v-device{left:auto;right:0;bottom:0;width:var(--dw-s);z-index:3}
.yt-device{position:absolute;z-index:2;left:0;bottom:0;width:var(--yw-s);aspect-ratio:9 / 19.5;padding:3px;border-radius:46px;background:linear-gradient(160deg,#8E8E93 0%,#48484A 18%,#2C2C2E 50%,#48484A 82%,#7C7C80 100%);box-shadow:0 30px 60px rgb(0 0 0 / .26),0 6px 16px rgb(0 0 0 / .16)}
.yt-device::before{content:'';position:absolute;inset:3px;border-radius:43px;background:#050505}
.yt-screen{background:#0F0F0F}
.yt-screen .dv-status{color:#F1F1F1}
.yt-screen .dv-icons svg{fill:#F1F1F1}
.yt-screen .dv-bat{border-color:rgb(255 255 255 / .55)}
.yt-screen .dv-bat i{background:#F1F1F1}
.yt-screen .dv-home{background:#F1F1F1}
.yt-screen .hv-yt{position:absolute;inset:0;width:auto;height:auto;margin:0;aspect-ratio:auto;padding-top:calc(12cqi + 6px);border:0;border-radius:0;box-shadow:none;opacity:1;transform:none;background:#0F0F0F;overflow:hidden}
.yt-screen .hy-banner{height:18cqi}
.yt-screen .hy-head{margin-top:-7cqi;padding:0 6cqi;gap:3cqi}
.yt-screen .hy-head img{width:20cqi;height:20cqi;padding:2cqi;border-width:1.4cqi}
.yt-screen .hy-head span{padding-top:7cqi}
.yt-screen .hy-head b{font-size:max(12px,6cqi)}
.yt-screen .hy-head small{font-size:max(9.5px,3.8cqi)}
.yt-screen .hy-bio{margin:3cqi 6cqi 0;font-size:max(9.5px,3.8cqi)}
.yt-screen .hy-link{margin:4cqi 4cqi 0;padding:3.6cqi 4cqi;gap:2.4cqi;border-radius:4cqi;font-size:max(11px,5.2cqi)}
.yt-screen .hy-link svg{width:max(13px,5.6cqi);height:max(13px,5.6cqi)}
.yt-screen .hy-btns{padding:4cqi 4cqi 0;gap:2.4cqi}
.yt-screen .hy-btns i{padding:2.6cqi;font-size:max(9.5px,4cqi)}
.yt-screen .hy-tabs{margin:5cqi 4cqi 0;padding-top:3cqi;gap:5cqi;font-size:max(9.5px,4cqi)}
.yt-screen .hy-grid{margin:3cqi 4cqi 0;gap:2.4cqi}
.yt-screen .hy-grid em{font-size:max(8px,3cqi)}
@media (prefers-reduced-motion:no-preference){
  .v-hero-art .yt-device{animation:hv-ytd 12s cubic-bezier(.65,0,.35,1) infinite both;animation-play-state:paused}
  .js-motion .v-hero-art.is-play .yt-device{animation-play-state:running}
  .v-hero-art .hv-yt{animation:none!important}
}
@keyframes hv-stage{0%,39.17%{transform:none;z-index:5}42.50%,94.17%{transform:translateY(-2%) scale(.86);z-index:1}98.33%,100%{transform:none;z-index:5}}
@keyframes hv-ytd{0%,39.58%{width:var(--yw-s);z-index:2}43.75%,52.92%{width:var(--yw-l);z-index:6}57.08%,100%{width:var(--yw-s);z-index:2}}
@keyframes hv-dev{0%,53.33%{width:var(--dw-s);z-index:3}57.92%,94.17%{width:var(--dw-l);z-index:7}98.33%,100%{width:var(--dw-s);z-index:3}}
@keyframes hv-yt{0%,100%{opacity:1}}
@media (max-width:759px){.v-hero-art{--sw-l:60%;--dw-s:37%;--dw-l:62%;--yw-s:37%;--yw-l:62%}.yt-device{padding:2px;border-radius:34px}.yt-device::before{inset:2px;border-radius:32px}}
@media (max-width:359px){.v-hero-art{--dw-s:37%;--yw-s:37%}}
.hy-head span.hy-sub{display:inline;padding:0}
@media (max-width:759px){
  .dm-profile b{font-size:6.2cqi}.dm-profile span,.dm-profile p{font-size:3.8cqi}
  .dm-live em{font-size:3.4cqi}.dm-live span{font-size:3.4cqi}.dm-live span b{font-size:4cqi}
  .dm-h{font-size:4.6cqi}.dm-p span{font-size:3.8cqi}.dm-p b{font-size:4.1cqi}.dm-p em{font-size:3.2cqi}.dm-tabs>*{font-size:3.8cqi}
  .dv-status{font-size:5.1cqi}
  .yt-screen .hy-head b{font-size:6cqi}.yt-screen :is(.hy-head small,.hy-bio){font-size:3.8cqi}.yt-screen .hy-link{font-size:5.2cqi}.yt-screen .hy-link svg{width:5.6cqi;height:5.6cqi}
  .yt-screen :is(.hy-btns i,.hy-tabs){font-size:4cqi}.yt-screen .hy-grid em{font-size:3cqi}
}

/* hero triangle tuning: shorter live card, phones overlap only its bottom corners, focus phone stops short of the top */
.v-hero-art{--sw-l:56%;--dw-s:36%;--dw-l:52%;--yw-s:36%;--yw-l:52%}
.v-hero-art .v-stage{aspect-ratio:3 / 4}
@media (max-width:759px){.v-hero-art{--sw-l:60%;--dw-s:38%;--dw-l:56%;--yw-s:38%;--yw-l:56%}}

/* mobile: chips may wrap so the price chip is never cut off */
@media (max-width:759px){.st-chips{flex-wrap:wrap;row-gap:4px}}

/* channel profile phone: closer to the real YouTube app (app bar, rounded photo banner, left aligned head, underlined tabs) */
.yt-screen .hv-yt{padding-top:calc(12cqi + 4px)}
.hy-bar{display:flex;align-items:center;gap:5cqi;padding:1cqi 4cqi 2cqi 2.6cqi;color:#F1F1F1}
.hy-bar i{flex:1}
.hy-bar svg{width:6.4cqi;height:6.4cqi;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hy-bar svg.dots{fill:currentColor;stroke:none}
.yt-screen .hy-banner{height:auto;aspect-ratio:3.4 / 1;margin:0 4cqi;border-radius:3cqi;overflow:hidden;background:#272727}
.hy-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.yt-screen .hy-head{margin-top:4.5cqi;padding:0 4cqi;gap:3.6cqi}
.yt-screen .hy-head img{width:19cqi;height:19cqi;padding:2.4cqi;border:0}
.yt-screen .hy-head>span{padding-top:0;gap:.6cqi}
.yt-screen .hy-bio{margin:3cqi 4cqi 0}
.yt-screen .hy-tabs{margin:5cqi 0 0;padding:0 4cqi;gap:5cqi;border-top:0;border-bottom:1px solid #272727}
.yt-screen .hy-tabs>*{padding-bottom:2.4cqi}
.yt-screen .hy-tabs b{box-shadow:inset 0 -2px #F1F1F1}

/* cardigan photo holds two cardigans: square thumbs center on the grey one */
img[src="cardigan.jpg"]{object-position:72% 45%}
.yt-screen .hy-head{margin-top:2cqi}
.yt-screen .hy-head{margin-top:4cqi}

/* link tap, calmer: finger presses, one thin ring (12s timeline, 5.2s to 6.6s) */
.yt-screen .hy-tap{right:24%;width:10cqi;height:10cqi;margin-top:-5cqi;background:rgb(255 255 255 / .42)}
.yt-screen .hy-tap::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid rgb(255 255 255 / .8);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .v-hero-art .hy-link span{animation:none!important}
  .v-hero-art .hy-tap{animation:hv-touch 12s cubic-bezier(.3,0,.2,1) infinite both!important;animation-play-state:paused!important}
  .v-hero-art .hy-tap::after{animation:hv-ring 12s cubic-bezier(.2,.6,.3,1) infinite both;animation-play-state:paused}
  .v-hero-art .yt-screen .hy-link{animation:hv-press 12s ease-out infinite both;animation-play-state:paused}
  .js-motion .v-hero-art.is-play :is(.hy-link span,.hy-tap){animation-play-state:running!important}
  .js-motion .v-hero-art.is-play .yt-screen .hy-link{animation-play-state:running}
  .js-motion .v-hero-art.is-play .hy-tap::after{animation-play-state:running}
}
@keyframes hv-touch{0%,47.50%{opacity:0;transform:scale(1.4)}49.17%{opacity:1;transform:none}50.83%{opacity:1;transform:scale(.8)}52.92%,100%{opacity:0;transform:scale(.8)}}
@keyframes hv-ring{0%,50.83%{opacity:0;transform:scale(.8)}51.25%{opacity:.9;transform:scale(.8)}55.00%,100%{opacity:0;transform:scale(2.6)}}
@keyframes hv-press{0%,49.17%{background:#1F1F1F}50.83%{background:#343434}54.17%,100%{background:#1F1F1F}}

/* slacks photo is tall: square thumbs show the waist and upper legs */
img[src="slacks.jpg"]{object-position:50% 30%}

/* mobile hero: one screen at a time, full size, swiping left (live 0-4.75s, channel 4.75-6.85s, shopper 6.85-11.3s) */
@media (max-width:759px){
  .v-ghost{aspect-ratio:10 / 12.5}
  .v-hero-art{--sw-l:88%;--dw-s:56%;--dw-l:56%;--yw-s:56%;--yw-l:56%}
  .v-hero-art .v-stage{top:50%;left:50%;width:88%;margin:-58.67% 0 0 -44%;z-index:3}
  .v-hero-art :is(.yt-device,.v-device){top:50%;bottom:auto;left:50%;right:auto;width:56%;margin:-60.67% 0 0 -28%;z-index:4;opacity:0}
}
@media (max-width:759px) and (prefers-reduced-motion:no-preference){
  .v-hero-art .v-stage{animation-name:hvm-stage}
  .v-hero-art .yt-device{animation-name:hvm-ytd}
  .v-hero-art .v-device{animation-name:hvm-dev}
  .v-hero-art :is(.v-stage,.yt-device,.v-device){animation-timing-function:cubic-bezier(.65,0,.35,1)}
}
@keyframes hvm-stage{0%,39.58%{opacity:1;transform:none}41.67%,95%{opacity:0;transform:translateX(-8%)}95.01%,96.25%{opacity:0;transform:translateX(8%)}98.75%,100%{opacity:1;transform:none}}
@keyframes hvm-ytd{0%,41.67%{opacity:0;transform:translateX(8%)}44.17%,53.33%{opacity:1;transform:none}55.42%,100%{opacity:0;transform:translateX(-8%)}}
@keyframes hvm-dev{0%,55.42%{opacity:0;transform:translateX(8%)}57.92%,94.17%{opacity:1;transform:none}96.25%,100%{opacity:0;transform:translateX(-8%)}}

/* regulars bento: stats · channels gone, customers stay · notice and 1:1 CS (7s loops) */
.rg-stats{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:18px}
.rs-top{display:flex;justify-content:space-between;align-items:flex-end}
.rs-top span{display:grid;gap:2px}
.rs-top small{font-size:13px;font-weight:600;color:var(--muted)}
.rs-top b{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.rs-top b small{margin-left:2px;font-size:15px;color:var(--ink)}
.rs-rate{padding:8px 12px;border-radius:14px;background:var(--lime-wash);text-align:right}
.rs-rate b{font-size:20px;color:var(--lime-text)}
.rs-list{display:grid;gap:9px}
.rs-list li{display:grid;grid-template-columns:64px 1fr 30px;align-items:center;gap:8px;font-size:13px;font-weight:700}
.rs-list i{height:10px;border-radius:999px;background:var(--panel);position:relative;overflow:hidden}
.rs-list i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--ink)}
.rs-list li:first-child i::after{background:var(--lime)}
.rs-list b{text-align:right}
.rg-keep{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:16px}
.rk-ch{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--panel)}
.rk-ch i{flex:none;width:30px;height:30px;border-radius:9px}
.rk-yt i{background:#FF0033 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7.5v9l7-4.5z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat}
.rk-kt i{background:#FEE500 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-4.4 0-8 2.7-8 6.1 0 2.2 1.5 4.1 3.7 5.2l-.8 3 3.3-2.2c.6.1 1.2.1 1.8.1 4.4 0 8-2.7 8-6.1S16.4 5 12 5z' fill='%233A1D1D'/%3E%3C/svg%3E") center/20px no-repeat}
.rk-ch span{display:grid;font-size:14px}
.rk-ch em{grid-area:2/1;font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}
.rk-off{opacity:0}
.rk-list{display:grid;gap:2px;margin-top:4px;padding:12px 14px;border-radius:14px;background:var(--ink);color:var(--white)}
.rk-list small{font-size:12px;font-weight:600;color:var(--on-dark)}
.rk-list b{font-size:19px;color:var(--lime)}
.rk-list span{font-size:12px;color:var(--on-dark)}
.rg-cs{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px}
.rc-note{display:grid;gap:4px;padding:12px 14px;border-radius:16px;background:var(--ink);color:var(--white);font-size:14px;font-weight:700}
.rc-note small{font-size:12px;font-weight:600;color:var(--lime)}
.rc-q,.rc-a{max-width:82%;padding:9px 13px;border-radius:16px;font-size:14px;font-weight:600;line-height:1.4}
.rc-q{display:grid;gap:2px;align-self:flex-start;background:var(--panel);border-top-left-radius:6px}
.rc-q small{font-size:11.5px;color:var(--muted)}
.rc-a{align-self:flex-end;background:var(--lime);border-top-right-radius:6px}
@media (prefers-reduced-motion:no-preference){
  .rg :is(.rs-list li,.rk-ch,.rk-on,.rk-off,.rk-list,.rc-note,.rc-q,.rc-a){animation-duration:7s;animation-iteration-count:infinite;animation-timing-function:var(--ease);animation-fill-mode:both;animation-play-state:paused}
  .js-motion .rg.is-play :is(.rs-list li,.rk-ch,.rk-on,.rk-off,.rk-list,.rc-note,.rc-q,.rc-a){animation-play-state:running}
  .rs-list li{animation-name:rg-bar}
  .rs-list li:nth-child(2){animation-delay:.12s}.rs-list li:nth-child(3){animation-delay:.24s}.rs-list li:nth-child(4){animation-delay:.36s}
  .rk-ch{animation-name:rk-gone}.rk-kt{animation-delay:.25s}
  .rk-on{animation-name:rk-on}.rk-off{animation-name:rk-off}
  .rk-kt :is(.rk-on,.rk-off){animation-delay:.25s}
  .rk-list{animation-name:rk-stay}
  .rc-note{animation-name:rc-in}.rc-q{animation-name:rc-q}.rc-a{animation-name:rc-a}
}
@keyframes rg-bar{0%,4%{opacity:0;transform:translateX(-8px)}12%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes rk-gone{0%,20%{opacity:1;filter:none}30%,92%{opacity:.45;filter:grayscale(1)}98%,100%{opacity:1;filter:none}}
@keyframes rk-on{0%,20%{opacity:1}26%,92%{opacity:0}98%,100%{opacity:1}}
@keyframes rk-off{0%,22%{opacity:0}30%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes rk-stay{0%,36%{opacity:0;transform:translateY(12px)}46%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(12px)}}
@keyframes rc-in{0%,3%{opacity:0;transform:translateY(-10px)}11%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes rc-q{0%,26%{opacity:0;transform:translateY(8px)}33%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes rc-a{0%,44%{opacity:0;transform:translateY(8px)}51%,92%{opacity:1;transform:none}98%,100%{opacity:0}}

/* pinned chat + chat bot: pin sits at the top like YouTube, bot avatar and wrench badge */
.v-livechat .yt-pin{margin:8px 12px 0;white-space:normal;line-height:1.4;box-shadow:inset 0 0 0 1px #3A3A3A}
.v-livechat .yt-pin :is(svg,img,b){flex:none}
.yt-pin .pin-ic{flex:none;width:14px;height:14px;fill:none;stroke:#AAAAAA;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.yc-wrench{fill:none;stroke:#3EA6FF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* hero without voice: the caption card becomes a product entry, chips fill in one by one */
.v-hero-art .st-chips{margin-top:10px}
.hw-cmd .cmd-ic{flex:none;width:max(13px,calc(16 * var(--u)));height:auto;fill:none;stroke:var(--lime);stroke-width:2;stroke-linejoin:round}

/* churn: four moments a viewer gives up, in the same tiles as the pain section */
/* one inconvenience per section: copy beside its motion scene, sides alternating */
.v-pain1{display:grid;gap:32px;align-items:center}
/* each problem is followed by a dark block with what BBerBee does about it */
.v-solve{margin-top:clamp(96px,11vw,150px)}
.v-solve+.v-pain1{padding-top:clamp(112px,13vw,180px)}
.sv-in{display:grid;gap:40px;align-items:center}
@media (min-width:1000px){.sv-in{grid-template-columns:1fr 1fr;gap:72px}.v-solve.is-flip .sv-copy{order:2}}
.sv-art .v-how{margin-top:0;grid-template-columns:1fr}
.sv-art .v-steps2{margin-top:0}
.sv-art .v-steps2 .is-dark{box-shadow:inset 0 0 0 1px #333}
.sv-art .v-livechat{box-shadow:0 0 0 1px #2A2A2A}
.sv-art .v-table{color:var(--ink)}
/* no solution shown yet: the dark block stays, empty */
.sv-empty .v-dark-in{min-height:clamp(240px,30vw,400px)}
.p1-tile{padding:clamp(20px,2.4vw,28px);border-radius:32px;background:var(--panel)}
.p1-tile .v-art{height:clamp(280px,30vw,360px)}
@media (min-width:1000px){
  .v-pain1{grid-template-columns:1fr 1fr;gap:72px}
  /* the hero puts its picture on the right, so the first of these starts with the picture on the left */
  .v-pain1.is-flip .p1-copy{order:2}
}

.ch-past{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;padding:16px;background:#B9CCE0}
.cb{max-width:85%;padding:9px 12px;border-radius:14px;background:var(--white);font-size:14px;font-weight:600;line-height:1.4}
.cb-me{align-self:flex-end;background:#FEE500}

.ch-rooms{padding:16px}
.ck-search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--panel);font-size:14px;font-weight:700}
.ck-search svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round}
.ck-list{display:grid;gap:2px;margin-top:8px}
.ck-list li{display:flex;align-items:center;gap:10px;padding:7px 4px}
.ck-list i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:13px;color:var(--white);font-size:14px;font-weight:800;font-style:normal}
.ck-list span{display:grid;min-width:0}
.ck-list b{font-size:14px}
.ck-list small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-q{position:absolute;right:16px;bottom:16px;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--ink);color:var(--white);font-size:14px;font-weight:600}


.ch-multi{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:minmax(0,1fr);gap:8px;padding:14px}
/* Safari does not resolve a percentage height inside the grid cell: the row size above bounds the column instead */
.cm-col{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.cm-msgs{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:0;overflow:hidden}
.cm-col small{display:flex;align-items:center;gap:5px;margin-bottom:2px;font-size:12px;font-weight:700;color:var(--muted)}
.cm-col small i{width:7px;height:7px;border-radius:50%}
.cm-col p{padding:7px 9px;border-radius:10px;background:var(--panel);font-size:12.5px;font-weight:600;line-height:1.35}
.cm-col .cm-ord{background:#FEF0E7;color:#B54708;transition:background-color .6s,color .6s,opacity .6s}
/* an order nobody answered: it goes grey as newer chat pushes it up */
.cm-col .cm-ord.is-buried{background:var(--panel);color:var(--ink);opacity:.4}
/* in the chat, the wait sits between the reply and the viewer giving up */
.ch-past .sw-left{position:static;align-self:center;margin:4px 0;transform:none;--px:0px}
/* the order-form chat: more room between the messages and the count */
.ch-formchat{gap:12px}
.ch-past.ch-formchat .sw-left{margin-top:20px}
.cm-col p{flex:none;overflow:hidden}

/* motion: an 8s loop per card, played only while the tiles are on screen (initMotion) */
@media (prefers-reduced-motion:no-preference){
  .ch-scene .ca{animation:8s cubic-bezier(.16,1,.3,1) infinite both paused}
  .js-motion .ch-scene.is-play .ca{animation-play-state:running}
  .ch-scene .a1{animation-name:ch-a1}.ch-scene .a2{animation-name:ch-a2}.ch-scene .a3{animation-name:ch-a3}
  .ch-scene .a4{animation-name:ch-a4}.ch-scene .a5{animation-name:ch-a5}
  .ch-scene .p4{animation-name:ch-p4}.ch-scene .p5{animation-name:ch-p5}
  .ch-scene .t1{animation-name:ch-t1;animation-timing-function:steps(8,end)}
  .ch-scene .t2{animation-name:ch-t2;animation-timing-function:steps(12,end)}
  .ch-scene .t3{animation-name:ch-t3;animation-timing-function:steps(16,end)}
}
@keyframes ch-a1{0%,2%{opacity:0;transform:translateY(8px)}8%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ch-a2{0%,14%{opacity:0;transform:translateY(8px)}20%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ch-a3{0%,26%{opacity:0;transform:translateY(8px)}32%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ch-a4{0%,38%{opacity:0;transform:translateY(8px)}44%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ch-a5{0%,62%{opacity:0;transform:translateY(8px)}68%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ch-p4{0%,42%{opacity:0;transform:translateX(var(--px,-50%)) scale(.8)}47%{opacity:1;transform:translateX(var(--px,-50%)) scale(1.06)}51%,90%{opacity:1;transform:translateX(var(--px,-50%))}96%,100%{opacity:0;transform:translateX(var(--px,-50%))}}
@keyframes ch-p5{0%,52%{opacity:0;transform:translateX(var(--px,0)) scale(.8)}57%{opacity:1;transform:translateX(var(--px,0)) scale(1.06)}61%,90%{opacity:1;transform:translateX(var(--px,0))}96%,100%{opacity:0;transform:translateX(var(--px,0))}}
@keyframes ch-t1{0%,4%{clip-path:inset(0 100% 0 0)}14%,100%{clip-path:inset(0 0 0 0)}}
@keyframes ch-t2{0%,18%{clip-path:inset(0 100% 0 0)}30%,100%{clip-path:inset(0 0 0 0)}}
@keyframes ch-t3{0%,30%{clip-path:inset(0 100% 0 0)}46%,100%{clip-path:inset(0 0 0 0)}}

/* rewind: the viewer scrubs back through the live looking for a product */
/* no dark ground under the photo: it showed as a hairline around the rounded corners */
.ch-rewind{background:none}
.ch-rewind img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.rw-live{position:absolute;left:14px;top:14px;padding:3px 8px;border-radius:6px;background:#D92D20;color:var(--white);font-size:11px;font-weight:800;letter-spacing:.03em}
.rw-seek{position:absolute;left:14px;top:50%;translate:0 -50%;padding:10px 14px;border-radius:999px;background:rgb(0 0 0 / .55);color:var(--white);font-size:13px;font-weight:800;opacity:0}
.rw-time{position:absolute;right:14px;bottom:22px;display:grid}
.rw-time i{grid-area:1 / 1;justify-self:end;padding:3px 7px;border-radius:6px;background:rgb(0 0 0 / .6);color:var(--white);font-size:11px;font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.rw-time i:not(.rw-t0){opacity:0}
.rw-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgb(255 255 255 / .3)}
.rw-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:#D92D20}
.rw-bar i::after{content:"";position:absolute;right:-6px;top:-4px;width:12px;height:12px;border-radius:50%;background:#D92D20}
.ch-rewind .ck-q{right:14px;bottom:auto;top:14px;background:var(--white);color:var(--ink);box-shadow:0 6px 18px rgb(0 0 0 / .25)}
@media (prefers-reduced-motion:no-preference){
  .ch-scene .rw-f1{animation-name:rw-f1}.ch-scene .rw-f2{animation-name:rw-f2}.ch-scene .rw-f3{animation-name:rw-f3}
  .ch-scene .rw-live{animation-name:rw-live}.ch-scene .rw-seek{animation-name:rw-seek}
  .ch-scene .rw-t0{animation-name:rw-t0}.ch-scene .rw-t1{animation-name:rw-t1}.ch-scene .rw-t2{animation-name:rw-t2}.ch-scene .rw-t3{animation-name:rw-t3}
  .ch-scene .rw-bar i{animation-name:rw-bar;animation-timing-function:cubic-bezier(.3,0,.2,1)}
}
@keyframes rw-f1{0%,17%{opacity:1}21%,64%{opacity:0}68%,100%{opacity:1}}
@keyframes rw-f2{0%,17%{opacity:0}21%,40%{opacity:1}44%,100%{opacity:0}}
@keyframes rw-f3{0%,40%{opacity:0}44%,64%{opacity:1}68%,100%{opacity:0}}
@keyframes rw-live{0%,15%{background:#D92D20}19%,100%{background:#555}}
@keyframes rw-seek{0%,14%,26%,38%,50%,62%,74%,100%{opacity:0}17%,23%,41%,47%,65%,71%{opacity:1}}
@keyframes rw-bar{0%,15%{width:100%}20%,39%{width:76%}44%,63%{width:52%}68%,100%{width:31%}}
@keyframes rw-t0{0%,15%{opacity:1}17%,100%{opacity:0}}
@keyframes rw-t1{0%,15%{opacity:0}17%,39%{opacity:1}41%,100%{opacity:0}}
@keyframes rw-t2{0%,39%{opacity:0}41%,63%{opacity:1}65%,100%{opacity:0}}
@keyframes rw-t3{0%,63%{opacity:0}65%,100%{opacity:1}}
@media (max-width:999px) and (min-width:760px){.ch-multi{gap:5px;padding:10px}.cm-col p{font-size:11px;padding:6px 7px}}

/* hero card: square, beside the hero copy. An illustration, not data */
.v-hero-card{justify-self:center;max-width:520px}
@media (min-width:1000px){.v-hero-card{justify-self:end}}
.dr-card{position:relative;aspect-ratio:1;width:100%;border-radius:32px;background:var(--panel);overflow:hidden}
.dr-head{position:absolute;left:clamp(20px,2.6vw,30px);right:clamp(20px,2.6vw,30px);top:clamp(20px,2.6vw,30px);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dr-head span{display:grid;gap:4px}
.dr-head b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.dr-head small{font-size:13px;font-weight:600;color:var(--muted)}

/* business details in the footer, required on a Korean commercial site */
.closing footer{flex-wrap:wrap}
.biz{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:14px;font-size:12.5px;font-style:normal;line-height:1.7;color:var(--on-dark)}
.biz b{margin-right:6px;font-weight:600;color:#8E8E93}
.biz a{color:inherit;text-decoration:none}
.biz a:hover{text-decoration:underline;text-underline-offset:3px}
/* light tiles inside a dark solution block keep dark text */
.v-solve .v-bento>li{color:var(--ink)}
/* in the dark block the screens are only as tall as the tallest one needs, the same in all three tiles */
.v-solve .v-bento-2 .v-art{min-height:0;flex:none}
@media (min-width:760px){.v-solve .v-bento-2 .v-art{height:284px}}
@media (max-width:759px){.v-solve .yp-tabs{margin-top:6px}}
/* the orders board needs the full width: copy above, board below */
@media (min-width:1000px){.sv-stack .sv-in{grid-template-columns:1fr;gap:44px}}
/* floating CTA: start free, with the demo page beside it */
.dock{gap:8px;align-items:stretch}
/* a thin light ring keeps the black button visible when it floats over the dark sections */
.dock .btn-main{width:240px;box-shadow:0 0 0 1px rgb(255 255 255 / .28),0 10px 28px rgb(0 0 0 / .18)}
.dock .btn-line{width:auto;padding:0 28px;height:auto;box-shadow:0 10px 28px rgb(0 0 0 / .14)}

/* "채널이 사라지면": the channels a customer ordered from go grey one by one */
.ch-gone{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px}
.gn-cap{font-size:12px;font-weight:700;color:var(--muted)}
.ch-gone .rk-ch{padding:14px 16px}
.ch-gone .rk-ch span{font-size:15px}
.ch-gone .gn-off{opacity:0;color:#B42318}
@media (prefers-reduced-motion:no-preference){
  .ch-scene .gn1{animation-name:gn-row1}.ch-scene .gn2{animation-name:gn-row2}
  .ch-scene .gn1 .gn-on{animation-name:gn-on1}.ch-scene .gn1 .gn-off{animation-name:gn-off1}
  .ch-scene .gn2 .gn-on{animation-name:gn-on2}.ch-scene .gn2 .gn-off{animation-name:gn-off2}
  .ch-scene .gn-row :is(i,b){animation:gn-dim1 8s infinite both paused}.ch-scene .gn2 :is(i,b){animation-name:gn-dim2}
  .js-motion .ch-scene.is-play .gn-row :is(i,b){animation-play-state:running}
}
@keyframes gn-row1{0%,2%{opacity:0;transform:translateY(8px)}8%,24%{opacity:1;transform:none}27%{transform:scale(.97)}31%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes gn-row2{0%,12%{opacity:0;transform:translateY(8px)}18%,38%{opacity:1;transform:none}41%{transform:scale(.97)}45%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
/* the channel icon and name go grey; the error under them stays red */
@keyframes gn-dim1{0%,29%{opacity:1;filter:none}31%,100%{opacity:.4;filter:grayscale(1)}}
@keyframes gn-dim2{0%,43%{opacity:1;filter:none}45%,100%{opacity:.4;filter:grayscale(1)}}
@keyframes gn-on1{0%,29%{opacity:1}31%,100%{opacity:0}}
@keyframes gn-off1{0%,29%{opacity:0}31%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes gn-on2{0%,43%{opacity:1}45%,100%{opacity:0}}
@keyframes gn-off2{0%,43%{opacity:0}45%,90%{opacity:1}96%,100%{opacity:0}}
/* the demo link sits under both columns, centred */
.sv-try{grid-column:1 / -1;display:grid;justify-items:center;gap:14px;margin-top:clamp(16px,3vw,40px);text-align:center}
.sv-note{font-size:15px;font-weight:600;color:var(--on-dark)}
.sv-cta{gap:8px;margin:0}
@media (min-width:1000px){.v-solve.is-flip .sv-try{order:3}}
/* a lone button at the bottom reads as more empty space than the same padding above a heading: trim it */
.sv-has-try{padding-bottom:clamp(64px,7vw,96px)}
/* the step highlight belonged to the 4-step flow; a single card on its own does not blink */
.sv-how>.hw{box-shadow:none;animation-name:none}

/* hero: the climb to a purchase. Five steps rise to "구매 완료"; customers hop up them and some fall off at each step
   (app.js). Each step is a block whose height is its place in the climb. */
.jr-num{display:flex;align-items:baseline;gap:6px;color:#D92D20;font-variant-numeric:tabular-nums}
.jr-num b{font-size:clamp(40px,4.6vw,56px);font-weight:800;line-height:1;letter-spacing:-.04em}
.jr-num small{font-size:14px;font-weight:700;color:var(--muted)}
.jr-plot{position:absolute;left:clamp(20px,2.6vw,30px);right:clamp(20px,2.6vw,30px);top:30%;bottom:0}
.jr-step{position:absolute;bottom:0;left:calc(4% + var(--i) * 19.2%);width:18.4%;height:calc(30% + var(--i) * 16.5%);display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:14px;border-radius:12px 12px 0 0;background:#E4E4E7;text-align:center}
.jr-step b{font-size:clamp(11.5px,1.15vw,14px);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.jr-step em{padding:4px 8px;border-radius:999px;background:#FEE4E2;color:#B42318;font-size:clamp(11px,1vw,12.5px);font-style:normal;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.jr-step em.is-zero{visibility:hidden}
.jr-step em.is-pop{animation:jr-pop .4s cubic-bezier(.16,1,.3,1)}
.jr-goal{background:var(--lime)}
.jr-goal b{font-size:clamp(13px,1.35vw,17px);font-weight:800}
.jr-goal.is-hit{animation:jr-hit .5s cubic-bezier(.16,1,.3,1)}
/* a customer climbing */
.jr-dot{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ink);will-change:transform}
.jr-dot.is-lost{background:#F04438}
@keyframes jr-pop{40%{transform:scale(1.25)}}
@keyframes jr-hit{40%{box-shadow:0 0 0 6px rgb(200 245 90 / .6)}}

/* ===== 링크 페이지 · 자동 등록 · 라벨기 (리빌드 v2) ===== */
.x-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:40px}
@media (max-width:759px){.x-ba{grid-template-columns:1fr}}
.x-ba>div{padding:clamp(20px,2.4vw,28px);border-radius:32px;background:var(--panel);display:flex;flex-direction:column;gap:18px}
.x-ba>div.is-after{background:var(--ink);color:var(--white)}
.x-ba-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.x-ba-top b{font-size:15px;font-weight:800;color:var(--muted)}
.x-ba .is-after .x-ba-top b{color:var(--lime)}
.x-ba-top span{padding:5px 11px;border-radius:999px;background:var(--white);font-size:12.5px;font-weight:800;color:var(--muted)}
.x-ba .is-after .x-ba-top span{background:var(--lime);color:var(--ink)}
.x-cloth{position:relative;height:clamp(280px,28vw,340px);border-radius:22px;overflow:hidden;background:#ddd}
.x-cloth>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.x-tape{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-6deg);padding:14px 26px 12px;background:rgb(236 222 190 / .94);box-shadow:0 4px 10px rgb(0 0 0 / .18);font-family:'Nanum Pen Script',cursive;font-size:clamp(30px,3vw,38px);line-height:1;color:#1F2A44;letter-spacing:0;white-space:nowrap;clip-path:polygon(2% 0,6% 6%,10% 0,15% 5%,20% 0,26% 6%,32% 0,38% 5%,44% 0,50% 6%,56% 0,62% 5%,68% 0,74% 6%,80% 0,86% 5%,92% 0,97% 6%,100% 0,100% 100%,96% 94%,91% 100%,85% 95%,79% 100%,73% 94%,67% 100%,61% 95%,55% 100%,49% 94%,43% 100%,37% 95%,31% 100%,25% 94%,19% 100%,13% 95%,7% 100%,3% 94%,0 100%,0 0)}
.x-tape s{color:#1F2A44;text-decoration-thickness:2px}
.x-tape2{top:72%;left:38%;transform:translate(-50%,-50%) rotate(5deg);font-size:clamp(24px,2.4vw,30px);padding:10px 20px 8px}
.x-sticker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);width:min(72%,240px);padding:14px 16px 12px;border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 10px 24px rgb(0 0 0 / .28);display:grid;gap:5px;font-size:12.5px;font-weight:600}
.x-sticker .x-row{display:flex;justify-content:space-between;gap:8px;color:var(--muted)}
.x-sticker .x-row strong{color:var(--ink);font-weight:800}
.x-sticker b{font-size:22px;font-weight:800;letter-spacing:-.03em}
.x-ba ul{display:grid;gap:10px;font-size:16px;font-weight:600;color:var(--muted)}
.x-ba li{display:flex;gap:10px}
.x-ba li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:#E4E4E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/11px no-repeat}
.x-ba .is-after ul{color:var(--white);font-weight:700}
.x-ba .is-after li::before{background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.x-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
@media (max-width:759px){.x-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.x-flow>div{padding:18px 20px;border-radius:24px;background:var(--panel);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:6px 8px}
.x-flow p{grid-column:1/-1}
.x-flow small{font-size:13px;font-weight:800;color:var(--lime-text)}
.x-flow b{font-size:17px;font-weight:800}
.x-flow p{font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.45}
.x-pol{width:min(100% - 32px,1120px);margin:56px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.x-pol>div{padding:22px;border-radius:24px;background:var(--panel);display:flex;flex-direction:column;gap:6px}
.x-pol>div.is-dark{background:var(--ink);color:var(--white)}
.x-pol small{font-size:13px;font-weight:700;color:var(--muted)}
.x-pol .is-dark small{color:var(--lime)}
.x-pol b{font-size:22px;font-weight:800;letter-spacing:-.04em;line-height:1.3}
.x-pol p{font-size:14px;font-weight:600;color:var(--muted);line-height:1.5}
.x-pol .is-dark p{color:var(--on-dark)}
@media (max-width:759px){.x-pol{grid-template-columns:1fr}}
.x-shop{position:absolute;inset:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:10px}
.x-shop-head{display:flex;align-items:center;gap:10px;padding:4px 2px 6px}
.x-shop-head img{width:44px;height:44px;padding:4px;border-radius:14px;background:var(--lime)}
.x-shop-head span{display:grid;flex:1;min-width:0}
.x-shop-head b{font-size:17px;font-weight:800}
.x-shop-head small{font-size:12.5px;font-weight:600;color:var(--muted)}
.x-lk{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:18px;background:var(--white);font-size:15px;font-weight:700}
.x-lk i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;font-style:normal;font-size:13px;font-weight:800}
.x-lk em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
.x-lk.is-main{background:var(--ink);color:var(--white)}
.x-lk.is-main em{color:var(--lime)}
.x-shop-list{display:grid;gap:6px;padding:10px;border-radius:18px;background:var(--white)}
.x-shop-list div{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--muted)}
.x-shop-list img{width:36px;height:36px;border-radius:10px;object-fit:cover;object-position:55% 35%}
.x-shop-list span{display:grid;flex:1;min-width:0}
.x-shop-list b{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-tag{flex:none;padding:3px 8px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:11px;font-style:normal;font-weight:800}
.x-lt{flex:none;padding:3px 7px;border-radius:6px;background:#D92D20;color:#fff;font-size:11px;font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.x-card{display:flex;flex-direction:column;gap:10px;padding:16px}
.x-kakao{background:#BACEE0}
.x-kakao .kr p{font-size:13px}
.x-kbtn{align-self:flex-start;margin-left:44px;padding:9px 14px;border-radius:12px;background:#fff;font-size:13px;font-weight:700;border:1px solid #E5E5E5}
.x-mall-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700}
.x-mall-url{padding:8px 12px;border-radius:999px;background:var(--panel);font-size:12.5px;font-weight:700;color:var(--muted)}
.x-mall-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.x-mall-grid div{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.x-mall-grid img{width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover}
.x-mall-grid b{font-size:12.5px;color:var(--ink)}
.x-form label{display:grid;gap:4px;font-size:12px;font-weight:700;color:var(--muted)}
.x-field{padding:10px 12px;border-radius:12px;background:var(--panel);font-size:14px;font-weight:600;color:var(--ink)}
.x-sum{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;background:var(--ink);color:var(--white);font-size:14px;font-weight:700}
.x-sum b{color:var(--lime);font-size:16px}
.x-cap{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.x-cap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.x-cap .x-frame{position:absolute;inset:0;border:5px solid var(--lime);border-radius:inherit;opacity:0;pointer-events:none;z-index:2}
.x-cap .x-live{position:absolute;left:14px;top:14px;display:flex;gap:6px}
.x-cap .x-live span{padding:3px 8px;border-radius:6px;background:#D92D20;color:#fff;font-size:11px;font-weight:800}
.x-cap .x-live time{padding:3px 8px;border-radius:6px;background:rgb(0 0 0 / .6);color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.x-cap .x-shot{position:absolute;right:14px;top:14px;display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:var(--white);font-size:12.5px;font-weight:800}
.x-cap .x-shot i{width:8px;height:8px;border-radius:50%;background:#D92D20}
.x-cap .x-result{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;background:var(--white);box-shadow:0 12px 30px rgb(0 0 0 / .22)}
.x-cap .x-result img{width:58px;height:58px;border-radius:12px;object-fit:cover;object-position:55% 30%}
.x-cap .x-result span{display:grid;gap:2px;flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--muted)}
.x-cap .x-result b{font-size:15px;color:var(--ink)}
.x-cap .x-result em{font-style:normal;font-size:12px;font-weight:700;color:var(--lime-text)}
.x-label{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch;padding:16px;height:100%}
.x-chat{display:flex;flex-direction:column;gap:7px;height:100%;min-height:0;padding:4px}
.x-chat small{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:2px}
.x-chat p{padding:8px 10px;border-radius:12px;background:var(--panel);font-size:13px;font-weight:600;line-height:1.35}
.x-chat p b{margin-right:5px;font-size:12px;color:var(--muted)}
.x-chat p.is-ord{background:#FEF0E7;color:#B54708}
.x-chat p.is-ord b{color:#B54708}
.x-printer{display:flex;flex-direction:column;align-items:center}
.x-printer-body{width:100%;max-width:220px;height:44px;border-radius:16px 16px 10px 10px;background:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:var(--white);font-size:11px;font-weight:800;position:relative;z-index:1}
.x-printer-body i{width:8px;height:8px;border-radius:50%;background:var(--lime)}
.x-slip{width:86%;max-width:190px;margin-top:-6px;padding:16px 14px 14px;border-radius:0 0 10px 10px;background:var(--white);box-shadow:0 10px 24px rgb(0 0 0 / .12);display:grid;gap:6px;font-size:12px;font-weight:600;color:var(--muted);transform-origin:top}
.x-slip b{font-size:15px;color:var(--ink);font-weight:800}
.x-slip .x-row{display:flex;justify-content:space-between;gap:8px}
.x-slip .x-row strong{color:var(--ink);font-weight:800}
.x-bar{height:26px;margin-top:4px;background:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px,#000 4px 5px,transparent 5px 8px)}
.x-cut{border-top:2px dashed #DADADA;margin:2px -14px}
@media (prefers-reduced-motion:no-preference){
.js-motion [data-play] .x-anim{animation-play-state:paused}
.js-motion [data-play].is-play .x-anim{animation-play-state:running}
.x-slip.x-anim{animation:x-print 6s var(--ease) infinite both}
.x-ordmsg.x-anim{animation:x-ord 6s var(--ease) infinite both}
.x-flash.x-anim{animation:x-flash 6s ease infinite both}
.x-frame.x-anim{animation:x-fr 6s ease infinite both}
.x-result.x-anim{animation:x-res 6s var(--ease) infinite both}
}
.x-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
@keyframes x-print{0%,30%{clip-path:inset(0 0 100% 0);transform:translateY(-6px)}50%,92%{clip-path:inset(0 0 0 0);transform:none}100%{clip-path:inset(0 0 100% 0)}}
@keyframes x-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes x-ord{0%,8%{opacity:0;transform:translateY(8px)}14%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes x-fr{0%,20%{opacity:0;transform:scale(1.04)}24%{opacity:1;transform:none}36%{opacity:1}42%,100%{opacity:0}}
@keyframes x-flash{0%,24%{opacity:0}27%{opacity:.85}36%,100%{opacity:0}}
@keyframes x-res{0%,34%{opacity:0;transform:translateY(16px) scale(.96)}44%,92%{opacity:1;transform:none}100%{opacity:0}}
.x-basic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:40px}
.x-basic>div{padding:24px;border-radius:28px;background:var(--panel);display:flex;flex-direction:column;gap:8px;min-height:180px}
.x-basic i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--ink);color:var(--lime)}
.x-basic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.x-basic b{margin-top:auto;font-size:19px;font-weight:800}
.x-basic p{font-size:14px;font-weight:600;color:var(--muted);line-height:1.5}
@media (max-width:899px){.x-basic{grid-template-columns:repeat(2,minmax(0,1fr))}}
.x-buyer{display:grid;gap:40px;align-items:center}

.x-phone{width:100%;max-width:360px;margin:0 auto;border-radius:36px;background:var(--panel);padding:18px;display:grid;gap:10px;box-shadow:0 20px 50px rgb(0 0 0 / .1)}
.x-phone-top{display:flex;align-items:center;gap:10px}
.x-phone-top img{width:52px;height:52px;border-radius:14px;object-fit:cover;object-position:55% 30%}
.x-phone-top span{display:grid;font-size:13px;font-weight:600;color:var(--muted)}
.x-phone-top b{font-size:15px;color:var(--ink)}
.x-nojoin{justify-self:start;padding:5px 10px;border-radius:999px;background:var(--lime-wash);color:#3F6212;font-size:12px;font-weight:800}
.x-pt{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;background:var(--lime);font-size:14px;font-weight:700}
.x-acct{padding:12px 14px;border-radius:14px;background:var(--white);font-size:13px;font-weight:600;color:var(--muted);display:grid;gap:2px}
.x-acct b{font-size:15px;color:var(--ink)}
.x-checks{display:grid;gap:12px;margin-top:28px}
.x-checks li{display:flex;gap:10px;font-size:17px;font-weight:700}
.x-checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.x-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.x-chips span{padding:8px 13px;border-radius:999px;background:var(--panel);font-size:13.5px;font-weight:800}
.x-chips .is-dark{background:var(--ink);color:var(--lime)}
.x-stage{position:relative;width:100%;max-width:520px;height:660px;border-radius:40px;background:linear-gradient(160deg,#F4FDDF,#E9F7C6 55%,#C8F55A);display:flex;align-items:center;justify-content:center;overflow:hidden}
.x-ph{width:320px;height:620px;padding:10px;border-radius:46px;background:#0B0B0B;box-shadow:0 30px 60px -20px rgb(0 0 0 / .45)}
.x-scr{position:relative;width:300px;height:600px;border-radius:36px;background:#0F0F0F;color:#F1F1F1;overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.x-scr svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.x-ytbar{position:absolute;left:0;right:0;top:0;height:48px;display:flex;align-items:center;justify-content:space-between;padding:12px 16px 0;font-size:15px}
.x-ytav{position:absolute;left:18px;top:60px;width:64px;height:64px;border:3px solid #0F0F0F;border-radius:50%;background:var(--lime) url(logo.png) center/44px no-repeat;overflow:hidden;-webkit-mask-image:radial-gradient(circle,#000 70%,transparent 71%);mask-image:radial-gradient(circle,#000 70%,transparent 71%);transform:translateZ(0)}
.x-ytname{position:absolute;left:16px;right:16px;top:130px;display:grid;gap:3px}
.x-ytname b{font-size:19px;font-weight:800}
.x-ytname small{font-size:11.5px;color:#AAA}
.x-ytbio{position:absolute;left:16px;top:180px;font-size:12.5px;color:#AAA}
.x-ytlink{position:absolute;left:16px;top:204px;display:flex;align-items:center;gap:6px;font-size:12.5px;color:#F1F1F1}
.x-ytlink svg{width:14px;height:14px;color:#AAA}
.x-ytu{position:relative;color:#3EA6FF;font-weight:700;padding:1px 2px;border-radius:4px}
.x-ytbtn{position:absolute;left:16px;right:16px;top:238px;display:flex;gap:8px}
.x-ytbtn i{flex:1;padding:9px;border-radius:999px;background:#F1F1F1;color:#0F0F0F;font-size:13px;font-style:normal;font-weight:700;text-align:center}
.x-ytbtn i+i{background:#272727;color:#F1F1F1}
.x-yttab{position:absolute;left:0;right:0;top:290px;display:flex;gap:18px;padding:10px 16px;border-bottom:1px solid #272727;font-size:13px;color:#AAA}
.x-yttab b{color:#F1F1F1}
.x-ytlive{position:absolute;left:16px;right:16px;top:342px;height:236px;border-radius:14px;overflow:hidden}
.x-ytlive img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.x-ytlive em{position:absolute;left:10px;top:10px;padding:2px 7px;border-radius:4px;background:#D92D20;font-size:11px;font-style:normal;font-weight:800}
.x-ytlive span{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;background:linear-gradient(transparent,rgb(0 0 0 / .75));font-size:12.5px;font-weight:700}
.x-ripple{position:absolute;left:62px;top:197px;width:76px;height:34px;border-radius:999px;background:rgb(62 166 255 / .35);opacity:0;pointer-events:none}
.x-finger{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgb(255 255 255 / .55);border:2px solid #fff;box-shadow:0 4px 14px rgb(0 0 0 / .35);transform:translate(250px,520px);opacity:0;pointer-events:none;z-index:5}
.x-sheet{position:absolute;inset:0;padding:12px 12px 14px;background:var(--panel);color:var(--ink);display:flex;flex-direction:column;gap:9px;transform:translateY(102%);z-index:4}
.x-sheet .x-lk{padding:11px 12px;font-size:14px}
.x-sheet .x-lk i{width:32px;height:32px}
.x-url{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:12px;background:var(--white);font-size:12.5px;font-weight:700;color:var(--muted)}
.x-url svg{width:13px;height:13px}
.x-callout{position:absolute;right:18px;bottom:22px;display:grid;gap:2px;padding:12px 16px;border-radius:18px;background:var(--ink);color:var(--white);box-shadow:0 12px 30px rgb(0 0 0 / .25);opacity:0}
.x-callout b{font-size:14px;font-weight:800;color:var(--lime)}
.x-callout span{font-size:12.5px;font-weight:600;color:var(--on-dark)}
@media (prefers-reduced-motion:no-preference){
.x-finger{animation:x-fg 8s cubic-bezier(.45,0,.25,1) infinite}
.x-ripple{animation:x-rp 8s ease-out infinite}
.x-ytu{animation:x-hl 8s ease infinite}
.x-sheet{animation:x-sh 8s cubic-bezier(.16,1,.3,1) infinite}
.x-pulse{animation:x-pl 8s ease infinite}
.x-callout{animation:x-co 8s cubic-bezier(.16,1,.3,1) infinite}
}
@keyframes x-fg{0%,4%{opacity:0;transform:translate(250px,520px)}10%{opacity:1;transform:translate(250px,520px)}26%{opacity:1;transform:translate(100px,214px) scale(1)}29%{transform:translate(100px,214px) scale(.82)}32%{opacity:1;transform:translate(100px,214px) scale(1)}38%,100%{opacity:0;transform:translate(100px,214px)}}
@keyframes x-rp{0%,27%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1)}40%,100%{opacity:0;transform:scale(1.25)}}
@keyframes x-hl{0%,26%{background:transparent}29%,36%{background:rgb(62 166 255 / .25)}42%,100%{background:transparent}}
@keyframes x-sh{0%,33%{transform:translateY(102%)}43%,88%{transform:none}96%,100%{transform:translateY(102%)}}
@keyframes x-pl{0%,56%{box-shadow:0 0 0 0 rgb(200 245 90 / 0)}60%{box-shadow:0 0 0 6px rgb(200 245 90 / .9)}66%,100%{box-shadow:0 0 0 0 rgb(200 245 90 / 0)}}
@keyframes x-co{0%,42%{opacity:0;transform:translateY(12px)}48%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(12px)}}
@media (max-width:420px){.x-stage{height:620px}.x-ph{transform:scale(.92)}}
.x-sh-head{display:flex;align-items:center;gap:8px}
.x-sh-head img{width:34px;height:34px;padding:3px;border-radius:11px;background:var(--lime)}
.x-sh-head span{display:grid;flex:1;min-width:0;line-height:1.25}
.x-sh-head b{font-size:15px;font-weight:800}
.x-sh-head small{font-size:11px;font-weight:600;color:var(--muted)}
.x-sh-mini{display:flex!important;flex:none!important;gap:5px}
.x-sh-mini i{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--white);font-size:11px;font-style:normal;font-weight:800;color:var(--ink);border:1px solid var(--line)}
.x-sh-title{display:flex;align-items:center;gap:6px;margin-top:2px}
.x-sh-title b{font-size:16px;font-weight:800}
.x-sh-title small{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted)}
.x-pgrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px;overflow:hidden}
.x-pc{min-height:0;display:flex;flex-direction:column;padding:5px 5px 7px;border-radius:14px;background:var(--white);line-height:1.25}
.x-pc-img{position:relative;flex:1;min-height:0;border-radius:10px;overflow:hidden;margin-bottom:5px}
.x-pc-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.x-pc-img em{position:absolute;left:5px;top:5px;font-size:9.5px!important;padding:2px 5px!important}
.x-pc b{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.x-pc span{font-size:12px;font-weight:800;padding:0 2px}
.x-sh-cta{flex:none;display:grid;place-items:center;height:44px;border-radius:14px;background:var(--ink);color:var(--white);font-size:14px;font-weight:800}
@media (prefers-reduced-motion:no-preference){
.x-pc-new{animation:x-pl 8s ease infinite}
}
.x-chat-win{position:relative;flex:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 100%);mask-image:linear-gradient(transparent,#000 22%,#000 100%)}
.x-chat-roll{display:flex;flex-direction:column;gap:7px}
.x-chat-roll p{padding:8px 10px;border-radius:12px;background:var(--panel);color:var(--ink);font-size:13px;font-weight:600;line-height:1.35}
.x-chat-roll p b{margin-right:5px;font-size:12px;color:var(--muted)}
.x-chat-roll p.is-ord{background:#FEF0E7;color:#B54708}
.x-chat-roll p.is-ord b{color:#B54708}
.x-pr3{position:relative;height:100%;min-height:300px;perspective:900px;perspective-origin:50% 20%}
.x-pr3-shadow{position:absolute;left:12%;right:12%;top:150px;height:40px;border-radius:50%;background:radial-gradient(rgb(0 0 0 / .22),transparent 70%)}
.x-cube{position:absolute;left:50%;top:40px;width:170px;height:84px;margin-left:-85px;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-32deg)}
.x-f{position:absolute;backface-visibility:hidden}
.x-f-front{left:0;top:0;width:170px;height:84px;border-radius:10px;background:linear-gradient(#2B2B2B,#141414);transform:translateZ(60px)}
.x-f-back{left:0;top:0;width:170px;height:84px;border-radius:10px;background:#111;transform:rotateY(180deg) translateZ(60px)}
.x-f-top{left:0;top:-18px;width:170px;height:120px;border-radius:14px;background:linear-gradient(135deg,#3A3A3A,#202020);transform:rotateX(90deg) translateZ(42px)}
.x-f-bottom{left:0;top:-18px;width:170px;height:120px;background:#0A0A0A;transform:rotateX(-90deg) translateZ(42px)}
.x-f-right{left:25px;top:0;width:120px;height:84px;border-radius:10px;background:linear-gradient(90deg,#1C1C1C,#0E0E0E);transform:rotateY(90deg) translateZ(85px)}
.x-f-left{left:25px;top:0;width:120px;height:84px;border-radius:10px;background:#151515;transform:rotateY(-90deg) translateZ(85px)}
.x-lid{position:absolute;left:14px;right:14px;top:16px;height:62px;border-radius:10px;border:2px solid #4A4A4A;background:linear-gradient(135deg,#444,#2A2A2A)}
.x-led{position:absolute;right:18px;bottom:16px;width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.x-slot{position:absolute;left:16px;right:16px;top:14px;height:6px;border-radius:3px;background:#000;box-shadow:inset 0 1px 2px rgb(255 255 255 / .12)}
.x-brand{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--lime)}
.x-paper{position:absolute;left:22px;top:17px;width:126px;transform:translateZ(61px);transform-origin:top}
.x-paper-in{padding:10px 10px 10px;background:#fff;border-radius:0 0 6px 6px;box-shadow:0 8px 16px rgb(0 0 0 / .35);display:grid;gap:4px;font-size:10px;font-weight:600;color:var(--muted);line-height:1.3}
.x-paper-in b{font-size:13px;color:var(--ink);font-weight:800}
.x-paper-in .x-row{display:flex;justify-content:space-between;gap:6px}
.x-paper-in .x-row strong{color:var(--ink);font-weight:800}
.x-paper-in .x-bar{height:16px}
@media (prefers-reduced-motion:no-preference){
.x-chat-roll.x-anim{animation:x-roll 16s linear infinite}
.x-paper-in.x-anim{animation:x-paper 6s cubic-bezier(.4,0,.2,1) infinite both}
.x-led{animation:x-led 6s ease infinite}
}
@keyframes x-roll{0%{transform:translateY(0)}100%{transform:translateY(calc(-50% - 3.5px))}}
@keyframes x-paper{0%,18%{clip-path:inset(0 0 100% 0);transform:translateY(-14px)}58%,88%{clip-path:inset(0 0 0 0);transform:translateY(0)}94%,100%{clip-path:inset(0 0 0 0);transform:translateY(0);opacity:0}}
@keyframes x-led{0%,16%{opacity:1}20%,56%{opacity:.35}24%,30%,40%,48%{opacity:1}60%,100%{opacity:1}}
.x-pr{position:relative;height:100%;display:flex;flex-direction:column;align-items:center}
.x-pr-body{position:relative;flex:none;width:176px;height:92px;margin-top:8px;border-radius:30px;background:var(--lime);box-shadow:inset 0 -6px 0 rgb(0 0 0 / .08),0 10px 22px rgb(0 0 0 / .12);z-index:2}
.x-pr-body::before,.x-pr-body::after{content:"";position:absolute;bottom:-6px;width:22px;height:10px;border-radius:0 0 8px 8px;background:#A6D93F}
.x-pr-body::before{left:26px}.x-pr-body::after{right:26px}
.x-pr-led{position:absolute;right:18px;top:14px;width:9px;height:9px;border-radius:50%;background:#fff}
.x-pr-eye{position:absolute;top:30px;width:9px;height:12px;border-radius:50%;background:var(--ink)}
.x-pr-eye:nth-of-type(1){left:66px}.x-pr-eye:nth-of-type(2){right:66px}
.x-pr-smile{position:absolute;left:50%;top:44px;width:18px;height:9px;margin-left:-9px;border:3px solid var(--ink);border-top:0;border-radius:0 0 12px 12px}
.x-pr-slot{position:absolute;left:22px;right:22px;bottom:12px;height:7px;border-radius:4px;background:var(--ink)}
.x-pr-out{position:relative;width:150px;flex:1;min-height:0;margin-top:-14px;overflow:hidden;z-index:1}
.x-pr-feed{display:flex;flex-direction:column;gap:6px;transform:translateY(-100%)}
.x-lb{height:78px;padding:9px 10px;border-radius:0 0 8px 8px;background:#fff;border:1px solid var(--line);border-top:2px dashed #D4D4D8;box-shadow:0 6px 14px rgb(0 0 0 / .08);display:grid;align-content:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--muted);line-height:1.3}
.x-lb:first-child{background:#fff}
.x-lb b{font-size:14px;color:var(--ink);font-weight:800}
.x-lb .x-row{display:flex;justify-content:space-between;gap:6px}
.x-lb .x-row strong{color:var(--ink);font-weight:800}
@media (prefers-reduced-motion:no-preference){
.x-pr-feed.x-anim{animation:x-feed 12s cubic-bezier(.4,0,.2,1) infinite both}
.x-pr-body{animation:x-bob 12s ease infinite}
.x-pr-led{animation:x-led2 12s ease infinite}
}
@media (prefers-reduced-motion:reduce){.x-pr-feed{transform:none}}
@keyframes x-feed{0%,4%{transform:translateY(calc(-100% + 14px));opacity:1}14%,28%{transform:translateY(calc(-66.6% + 14px))}38%,52%{transform:translateY(calc(-33.3% + 14px))}62%,90%{transform:translateY(14px);opacity:1}96%,100%{transform:translateY(14px);opacity:0}}
@keyframes x-bob{0%,4%,14%,28%,38%,52%,62%,100%{transform:none}8%,32%,56%{transform:translateY(-3px) scale(1.02)}}
@keyframes x-led2{0%,4%{background:#fff}6%,14%,30%,38%,54%,62%{background:#FF5A3C}16%,28%,40%,52%,64%,100%{background:#fff}}
.x-fnwrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}
@media (max-width:759px){.x-fnwrap{grid-template-columns:1fr}}
.x-fn{padding:20px;border-radius:24px;background:var(--panel);display:flex;flex-direction:column;gap:12px}
.x-fn.is-dark{background:var(--ink);color:var(--white)}
.x-fn-top{display:flex;justify-content:space-between;align-items:center}
.x-fn-top b{font-size:15px;font-weight:800;color:var(--muted)}
.x-fn.is-dark .x-fn-top b{color:var(--lime)}
.x-fn-top span{padding:4px 10px;border-radius:999px;background:var(--white);font-size:12px;font-weight:800;color:var(--muted)}
.x-fn.is-dark .x-fn-top span{background:var(--lime);color:var(--ink)}
.x-fn ol{display:grid;gap:9px}
.x-fn li{display:grid;grid-template-columns:minmax(0,1fr) auto 32px;align-items:center;gap:8px;font-size:13px;font-weight:700}
.x-fn li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-fn li em{display:flex;gap:3px}
.x-fn li em i{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.x-fn.is-dark li em i{background:var(--lime)}
.x-fn li em i.is-off{background:#F04438;opacity:.35}
.x-fn.is-dark li em i.is-off{background:#555;opacity:1}
.x-fn li b{text-align:right;font-variant-numeric:tabular-nums}
.x-fn-res{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--line)}
.x-fn.is-dark .x-fn-res{border-color:#2B2B2B}
.x-fn-res span{font-size:13px;font-weight:700;color:var(--muted)}
.x-fn-res b{font-size:30px;font-weight:800;letter-spacing:-.03em;color:#D92D20}
.x-fn.is-dark .x-fn-res b{color:var(--lime)}
.x-fn-note{font-size:12.5px;font-weight:600;line-height:1.5;color:var(--on-dark)}
.x-fn-ex{display:block;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--muted)}
@media (min-width:760px){.x-bento4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.x-kk{gap:8px!important;padding:14px!important}
.x-kk-page{display:grid;gap:6px;padding:10px;border-radius:14px;background:var(--panel)}
.x-kk-page small{font-size:11px;font-weight:700;color:var(--muted);text-align:center}
.x-kk-btn{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:#FEE500;color:#3A1D1D;font-size:13px;font-weight:800;box-shadow:0 0 0 3px rgb(200 245 90 / .9)}
.x-kk-btn i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#3A1D1D;color:#FEE500;font-size:10px;font-style:normal}
.x-kk-btn em{margin-left:auto;font-style:normal}
.x-kk-arrow{align-self:center;padding:3px 10px;border-radius:999px;background:var(--ink);color:var(--lime);font-size:11px;font-weight:800;position:relative}
.x-kk-chat{flex:1;min-height:0;border-radius:14px;overflow:hidden;background:#BACEE0;display:flex;flex-direction:column}
.x-kk-top{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#FEE500;color:#3A1D1D}
.x-kk-top i{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:var(--lime);font-size:10px;font-style:normal;font-weight:800;color:var(--ink)}
.x-kk-top b{font-size:12.5px;font-weight:800}
.x-kk-top small{margin-left:auto;font-size:10.5px;font-weight:700}
.x-kk-msgs{display:grid;gap:5px;padding:8px}
.x-kk-msgs p{justify-self:start;max-width:88%;padding:6px 9px;border-radius:10px;background:#fff;color:#1E1E1E;font-size:11.5px;font-weight:600;line-height:1.35}
.x-kk-msgs p.is-me{justify-self:end;background:#FEE500}
.x-br{overflow:hidden}
.x-br-ban{height:92px;flex:none}
.x-br-ban img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.x-br-body{position:relative;flex:1;padding:0 14px 14px;display:flex;flex-direction:column;gap:8px}
.x-br-id{display:flex;align-items:flex-end;gap:8px;margin-top:-22px}
.x-br-id img{width:52px;height:52px;padding:5px;border:3px solid #fff;border-radius:16px;background:var(--lime)}
.x-br-id span{display:grid;padding-bottom:2px;line-height:1.3}
.x-br-id b{font-size:15px;font-weight:800}
.x-br-id small{font-size:10.5px;font-weight:600;color:var(--muted)}
.x-br-intro{font-size:12.5px;font-weight:600;line-height:1.45;color:var(--ink)}
.x-br-sns{margin-top:auto;display:flex;align-items:center;gap:5px}
.x-br-sns i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;color:#fff;font-size:9.5px;font-style:normal;font-weight:800}
.x-br-sns span{margin-left:auto;padding:4px 8px;border-radius:999px;background:#D92D20;color:#fff;font-size:10.5px;font-weight:800;white-space:nowrap}
.x-up{display:inline-block;width:24px;height:24px;margin-left:6px;vertical-align:-3px;fill:none;stroke:#E5322D;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.x-kk-page{display:flex!important;align-items:center;gap:8px;padding:8px 10px!important;border-radius:14px;background:var(--panel)}
.x-kk-page img{flex:none;width:30px;height:30px;padding:3px;border-radius:10px;background:var(--lime)}
.x-kk-nm{display:grid;flex:1;min-width:0;line-height:1.25}
.x-kk-nm b{font-size:13px;font-weight:800}
.x-kk-nm small{font-size:10px;font-weight:700;color:var(--muted);text-align:left!important}
.x-kk-ic{display:flex;gap:4px}
.x-kk-ic i{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#fff;border:1px solid var(--line);font-size:10.5px;font-style:normal;font-weight:800}
.x-kk-ic i.is-kk{background:#FEE500;color:#3A1D1D;border-color:#FEE500;box-shadow:0 0 0 3px rgb(200 245 90 / .95)}
.x-kk-tap{position:absolute;right:-7px;bottom:-7px;width:16px;height:16px;border-radius:50%;background:rgb(0 0 0 / .35);border:2px solid #fff}
.x-kk-ic i,.x-pills i{width:auto!important;height:26px!important;padding:0 8px 0 5px;gap:3px;display:inline-flex!important;align-items:center;border-radius:999px!important;font-size:10.5px!important;white-space:nowrap;background:#fff;border:1px solid var(--line)}
.x-kk-ic i svg,.x-pills i svg{width:15px;height:15px;flex:none}
.x-kk-ic i.is-kk,.x-pills i.is-kk{background:#FEE500!important;color:#3A1D1D!important;border-color:#FEE500!important}
.x-kk-nm small{display:none}
.x-free{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:10px 16px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:15px;font-weight:800}