/* 화면: 흰 바탕 + 검정 + 얇은 선, 장식 없음. 볼거리는 실제 영상이 맡는다. 인터랙션: 토스 앱 */
:root{
  --ink:#0A0A0A; --sub:#555555; --muted:#767676; --line:#E6E6E6; --soft:#F4F4F4;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.2,.9,.25,1);
  --nav:64px; --r:12px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#fff;font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
video{display:block;width:100%;height:100%;object-fit:cover;background:#111}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hidden{display:none!important}

/* 내비 */
.topnav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1200px)/2));background:#fff;border-bottom:1px solid var(--line)}
.logo{font-size:19px;font-weight:800;letter-spacing:-.03em}
.navlinks{display:flex;align-items:center;gap:4px}
.navlink{padding:8px 12px;font-size:15px;color:var(--sub)}
.navlink:hover{color:var(--ink)}
.navbtn{height:38px;padding:0 16px;margin-left:8px;border-radius:10px;background:var(--ink);color:#fff;font-size:14px;font-weight:600}
.navbtn.user{display:inline-flex;align-items:center;gap:8px;padding:0 12px 0 6px;background:transparent;color:var(--ink);border:1px solid var(--line)}
.navbtn.user img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.navbtn.user:not(:has(img)){padding-left:12px}
.navbtn.user span{max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 화면 전환 (토스 푸시) */
.screen{position:fixed;inset:var(--nav) 0 0 0;overflow-y:auto;background:#fff;opacity:0;pointer-events:none;transform:translateX(32px);transition:opacity .3s var(--ease),transform .34s var(--ease)}
.screen.dark{background:#0A0A0A;color:#fff}
.screen.active{opacity:1;pointer-events:auto;transform:none}
.screen.leave-left{transform:translateX(-32px)}
.screen.active .rise{animation:rise .55s var(--ease) both}
.d1{animation-delay:.07s!important}.d2{animation-delay:.14s!important}.d3{animation-delay:.21s!important}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* 랜딩 히어로: 왼쪽 글, 오른쪽 실제 결과물 */
.hero{max-width:1200px;margin:0 auto;padding:72px 24px 64px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center}
.kicker{font-size:15px;font-weight:600;color:var(--sub)}
.display{margin:16px 0 0;font-size:clamp(40px,5.6vw,76px);line-height:1.08;font-weight:800;letter-spacing:-.045em}
.lead{margin:24px 0 0;max-width:520px;font-size:18px;line-height:1.65;color:var(--sub)}
.field{height:60px;border:1.5px solid var(--ink);border-radius:var(--r);background:#fff;display:flex;align-items:center;padding:0 6px 0 18px;gap:2px;width:100%}
.field.big{margin-top:36px;max-width:560px;height:64px}
.field:focus-within{box-shadow:0 0 0 4px rgba(10,10,10,.08)}
.prefix{font-size:17px;color:var(--muted);flex-shrink:0}
.field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-size:17px;font-weight:600}
.field input::placeholder{font-weight:400;color:#A3A3A3}
.link{margin-top:14px;padding:6px 0;font-size:15px;color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--ink)}
.showcase{display:flex;gap:14px;align-items:flex-end}
.showcase .clip{width:220px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#111}
.showcase .clip.small{width:170px;margin-bottom:28px}
.caption{margin-top:10px;font-size:13px;color:var(--muted)}

.block{max-width:1200px;margin:0 auto;padding:72px 24px;border-top:1px solid var(--line)}
.h2c{margin:0 0 32px;font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.035em}
.exgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 14px}
.widegrid{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 14px}
.ex.wide .v{aspect-ratio:16/9}
.count{font-size:.6em;font-weight:600;color:var(--muted);margin-left:6px}
.ex{text-align:left}
.ex .v{aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#111;position:relative}
.ex .v video{transition:transform .4s var(--ease)}
.ex:hover .v video{transform:scale(1.03)}
.ex .who{display:block;margin-top:10px;font-size:15px;font-weight:700}
.ex .tag{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.how li{display:flex;flex-direction:column;gap:6px;padding-top:20px;border-top:2px solid var(--ink)}
.how b{font-size:15px;font-weight:700;color:var(--muted);margin-bottom:6px}
.how strong{font-size:21px;letter-spacing:-.02em}.how span{font-size:16px;color:var(--sub);line-height:1.55}
.pricegrid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pcard{padding:32px;display:flex;flex-direction:column;gap:8px;text-align:left;border-right:1px solid var(--line);transition:background .15s}
.pcard:last-child{border-right:0}
.pcard:hover{background:#FAFAFA}
.pcard .pn{font-size:16px;font-weight:700;display:flex;align-items:center}
.pcard .pw{font-size:36px;font-weight:800;letter-spacing:-.04em;margin:0 0 6px}
.pcard .pwas{display:block;margin-top:6px;font-size:15px;line-height:20px}
.was{color:var(--muted);font-weight:500;margin-right:6px}
.off{color:#E5322D;font-weight:700;margin-right:6px}
.pcard .pd{font-size:15px;color:var(--sub);line-height:1.55}
.pcard .pe{font-size:14px;color:var(--muted)}
.pcard .go{margin-top:20px;height:48px;border-radius:10px;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600}
.pcard.best .go{background:var(--ink);color:#fff}
.foot{max-width:1200px;margin:0 auto;padding:32px 24px 56px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot p{margin:0}
.foot-brand{color:var(--sub);font-weight:600}
.foot-biz{margin-top:8px!important;line-height:1.7;word-break:keep-all}
.foot-biz a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 흐름 화면 */
.flow{max-width:560px;margin:0 auto;padding:56px 24px 96px}
.backlink{display:inline-flex;align-items:center;gap:2px;margin:0 0 24px -6px;padding:6px 6px 6px 0;font-size:15px;color:var(--sub)}
.backlink svg{width:20px;height:20px}
.title{margin:0;font-size:clamp(28px,3vw,36px);line-height:1.3;font-weight:800;letter-spacing:-.035em}
.title.light{color:#fff}
.sub{display:block;margin:10px 0 0;font-size:17px;line-height:1.55;color:var(--sub)}
.sub.light{color:#A3A3A3}
.h2{margin:36px 0 0;font-size:17px;font-weight:700}
.label{display:block;margin:28px 0 8px;font-size:14px;font-weight:600;color:var(--sub)}
.hint{margin:14px 0 0;font-size:15px;color:var(--muted)}
.fine{margin:0 0 10px;font-size:14px;color:var(--muted)}
.muted{color:var(--muted);font-weight:400}
.actions{margin-top:36px;display:flex;flex-direction:column;gap:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.actions.two{display:grid}

.cta{height:56px;width:100%;border-radius:var(--r);background:var(--ink);color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;overflow:hidden;transition:transform .12s ease,background .15s}
.cta:hover{background:#262626}
.cta:active{transform:scale(.98)}
.cta:disabled{background:#E6E6E6;color:#9A9A9A;transform:none;cursor:default}
.cta.inline{width:auto;height:50px;padding:0 22px;flex-shrink:0;border-radius:9px}
.cta.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.cta.ghost:hover{background:var(--soft)}
.cta.light{background:#fff;color:var(--ink)}
.cta.light:hover{background:#E6E6E6}
.cta.soft{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.cta.soft:hover{background:var(--soft)}
.cta.kakao{background:#FEE500;color:#191919}
.cta.kakao svg{fill:currentColor;stroke:none;width:20px;height:20px}
.txt{padding:12px;font-size:15px;color:var(--sub)}
.txt.light{color:#A3A3A3}

.card{margin-top:28px;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff}
.card.flat{padding:4px 0}
.profile{display:flex;align-items:center;gap:14px}
.profile b{display:block;font-size:18px}.profile span{font-size:15px;color:var(--sub)}
.avatar{width:60px;height:60px;border-radius:50%;background:#E6E6E6 center/cover}
.grid3{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;border-radius:10px;overflow:hidden}
.grid3 i{aspect-ratio:1;background:#EDEDED center/cover}
/* 계정 확인 — 불러오는 중: 칸마다 차례로 지나가는 빛 + 점 + 진행 막대. 사진이 오면 차례로 나타난다 */
.cfbar{height:3px;margin-top:18px;background:#EDEDED;border-radius:2px;overflow:hidden;transition:opacity .4s}
.cfbar i{display:block;height:100%;width:0;background:var(--ink);transition:width 1s linear}
#cfCard:not(.loading) .cfbar{opacity:0}
#cfCard.loading .avatar,#cfCard.loading .grid3 i{background-color:#E1E1E1;background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,#FAFAFA 50%,rgba(255,255,255,0) 70%);background-size:250% 100%;animation:shimmer 1.4s ease-in-out infinite}
#cfCard.loading .grid3 i:nth-child(2){animation-delay:.08s}#cfCard.loading .grid3 i:nth-child(3){animation-delay:.16s}
#cfCard.loading .grid3 i:nth-child(4){animation-delay:.12s}#cfCard.loading .grid3 i:nth-child(5){animation-delay:.2s}#cfCard.loading .grid3 i:nth-child(6){animation-delay:.28s}
#cfCard.loading .profile b::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:ldots 1.2s steps(4) infinite}
#cfCard.loaded .avatar,#cfCard.loaded .grid3 i{animation:tileIn .45s cubic-bezier(.2,.8,.2,1) both}
#cfCard.loaded .grid3 i:nth-child(1){animation-delay:.05s}#cfCard.loaded .grid3 i:nth-child(2){animation-delay:.1s}#cfCard.loaded .grid3 i:nth-child(3){animation-delay:.15s}
#cfCard.loaded .grid3 i:nth-child(4){animation-delay:.2s}#cfCard.loaded .grid3 i:nth-child(5){animation-delay:.25s}#cfCard.loaded .grid3 i:nth-child(6){animation-delay:.3s}
@keyframes shimmer{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes ldots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@keyframes tileIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#cfCard.loading .avatar,#cfCard.loading .grid3 i,#cfCard.loaded .avatar,#cfCard.loaded .grid3 i{animation:none}}

/* 라디오 목록 */
.list{display:flex;flex-direction:column}
.opt{display:flex;align-items:center;gap:14px;padding:16px 20px;text-align:left;transition:background .15s;border-bottom:1px solid var(--line)}
.opt:last-child{border-bottom:0}
.opt:hover{background:#FAFAFA}
.ring{width:22px;height:22px;border-radius:50%;border:1.5px solid #C4C4C4;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .18s var(--ease)}
.ring svg{width:13px;height:13px;stroke:#fff;stroke-width:3.2;opacity:0;transform:scale(.5);transition:all .18s var(--ease)}
.opt[aria-checked=true] .ring{border-color:var(--ink);background:var(--ink)}
.opt[aria-checked=true] .ring svg{opacity:1;transform:none}
.opt .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.opt .name{font-size:17px;font-weight:600;display:flex;align-items:center}
.opt[aria-checked=true] .name{font-weight:700}
.opt .desc{font-size:15px;line-height:1.5;color:var(--sub)}
.opt .eta{font-size:13px;color:var(--muted)}
.opt .price{font-size:17px;font-weight:700}
.opt .dot{width:22px;height:22px;border-radius:50%;border:1.5px solid #C4C4C4;flex-shrink:0;transition:border .15s}
.opt[aria-checked=true] .dot{border:7px solid var(--ink)}
.badge{font-size:12px;font-weight:600;color:var(--ink);background:var(--soft);padding:3px 7px;border-radius:6px;margin-left:8px}

/* 진행: 점 → 막대 */
.progress{margin:32px 0 0;height:4px;position:relative}
.dots{display:flex;gap:7px;position:absolute;inset:0;transition:opacity .25s}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--ink);animation:dot 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.12s}.dots i:nth-child(3){animation-delay:.24s}.dots i:nth-child(4){animation-delay:.36s}.dots i:nth-child(5){animation-delay:.48s}
@keyframes dot{0%,100%{opacity:.2}50%{opacity:1}}
.track{position:absolute;inset:0;background:var(--line);overflow:hidden;opacity:0;transform:scaleX(.2);transform-origin:left;transition:opacity .3s,transform .4s var(--ease)}
.fill{height:100%;width:0;background:var(--ink);transition:width .6s var(--ease)}
.progress.on .dots{opacity:0}
.progress.on .track{opacity:1;transform:none}
.steps{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.steps li{display:flex;align-items:center;gap:12px;font-size:17px;color:#A3A3A3;min-height:24px}
.steps .st{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.steps .st::before{content:"";width:6px;height:6px;border-radius:50%;background:#C4C4C4}
.steps li.now{color:var(--ink);font-weight:700}
.steps li.now .st::before{width:16px;height:16px;background:none;border:2px solid var(--line);border-top-color:var(--ink);animation:spin .8s linear infinite}
.steps li.ok{color:var(--sub)}
.steps li.ok .st::before{width:20px;height:20px;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;animation:pop .45s var(--spring) both}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:none}}
.finds{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.find{margin:0;opacity:0;transform:translateY(14px);transition:all .45s var(--ease)}
.find.show{opacity:1;transform:none}
.find .cap{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.find b{font-size:18px;line-height:1.45}
.find.row{display:flex;justify-content:space-between;align-items:center}
.swatches{display:flex;gap:6px}.swatches i{width:24px;height:24px;border-radius:6px;border:1px solid var(--line)}
.minis{display:flex;gap:5px}.minis i{width:36px;height:64px;border-radius:6px;background:#111 center/cover}
.check{width:44px;height:44px;border-radius:50%;background:var(--ink);display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px}
.check svg{stroke:#fff;stroke-width:3}
.headline .check{width:36px;height:36px;margin:0 12px 0 0;vertical-align:middle}
.screen.active .pop{animation:pop .5s var(--spring) both}
.roll{display:inline-block}
.roll.up{animation:rollUp .32s var(--ease) both}.roll.down{animation:rollDown .32s var(--ease) both}
@keyframes rollUp{from{opacity:0;transform:translateY(70%)}to{opacity:1;transform:none}}
@keyframes rollDown{from{opacity:0;transform:translateY(-70%)}to{opacity:1;transform:none}}

/* 미리보기: 실제 영상 5초 */
.stage{min-height:100%;max-width:1040px;margin:0 auto;padding:40px 24px;display:flex;align-items:center;justify-content:center;gap:64px}
.player{position:relative;height:min(76vh,720px);aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#111;flex-shrink:0}
.player video{position:absolute;inset:0}
.wm{position:absolute;right:12px;bottom:12px;font-size:11px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.7);background:rgba(0,0,0,.45);padding:5px 8px;border-radius:6px}
.vbar{position:absolute;left:12px;right:12px;top:12px;z-index:2}
.vtrack{height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.vfill{height:100%;width:0;background:#fff}
.vtime{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:#E6E6E6;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.side{max-width:380px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pill{font-size:13px;font-weight:600;color:#A3A3A3;margin-bottom:12px}
.side .actions{width:100%}

/* 결제 */
.amount{margin:6px 0 0;font-size:44px;font-weight:800;letter-spacing:-.04em}
.kv{margin:28px 0 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:12px 16px;font-size:16px}
.kv dt{color:var(--muted)}.kv dd{margin:0;text-align:right}
.kv.in{margin:0 0 16px;border-bottom:0}
.list.card.flat{margin-top:14px}
.req textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px;font-size:16px;line-height:1.5;resize:none;outline:0}
.req textarea:focus{border-color:var(--ink)}

/* 결과 */
.resultgrid{max-width:1000px;margin:0 auto;padding:56px 24px 96px;display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center}
.final{height:min(72vh,660px);aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#111}
.rows.card.flat{margin-top:28px;display:flex;flex-direction:column;padding:0}
.rowbtn{height:58px;padding:0 18px;display:flex;align-items:center;gap:14px;font-size:16px;text-align:left;border-bottom:1px solid var(--line);transition:background .15s}
.rowbtn:last-child{border-bottom:0}
.rowbtn:hover{background:#FAFAFA}
.rowbtn svg{width:20px;height:20px;color:var(--sub)}
.confetti{position:absolute;left:0;right:0;top:0;height:0;z-index:5;pointer-events:none}
.confetti i{position:absolute;top:0;width:7px;height:12px;border-radius:1px;animation:fall 2s cubic-bezier(.25,.6,.4,1) both}
@keyframes fall{0%{opacity:1;transform:translate(0,-20px) rotate(0)}100%{opacity:0;transform:translate(var(--dx),620px) rotate(540deg)}}

/* 시트: 모바일 바텀시트 / 데스크톱 모달 */
.dim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:40}
.dim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:41;background:#fff;color:var(--ink);border-radius:20px;padding:12px 20px 20px;display:flex;flex-direction:column;left:8px;right:8px;bottom:8px;transform:translateY(115%);transition:transform .36s var(--spring),opacity .22s}
.sheet.on{transform:none}
.sheet .handle{width:36px;height:4px;border-radius:2px;background:#E0E0E0;align-self:center}
.sheet h2{margin:22px 0 6px;font-size:22px;line-height:1.4;font-weight:800;letter-spacing:-.03em}
.sheet>p{margin:0 0 16px;font-size:16px;color:var(--sub)}
.sheet .list{margin:0 -20px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sheet .cta{margin-top:4px}
@media (min-width:720px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:440px;padding:28px;border-radius:18px;opacity:0;pointer-events:none;transform:translate(-50%,-47%) scale(.97)}
  .sheet.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
  .sheet .handle{display:none}
  .sheet h2{margin-top:0}
  .sheet .list{margin:0 -28px 16px}
}
.agree{margin:8px 0 16px;padding:16px;border:1px solid var(--line);border-radius:12px;display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:#333;cursor:pointer}
.agree input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);flex-shrink:0}
.edits{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.edits label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.edits input{height:50px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 14px;font-size:16px;color:var(--ink);outline:0}
.edits input:focus{border-color:var(--ink)}

.toast{position:fixed;left:50%;bottom:40px;z-index:50;transform:translate(-50%,12px);opacity:0;background:var(--ink);color:#fff;padding:13px 18px;border-radius:10px;font-size:15px;white-space:nowrap;transition:all .25s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 반응형 */
@media (max-width:960px){
  .hero{grid-template-columns:1fr;gap:40px}
  .showcase{justify-content:flex-start}
  .exgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .widegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how{grid-template-columns:1fr}
  .pricegrid{grid-template-columns:1fr}
  .pcard{border-right:0;border-bottom:1px solid var(--line)}
  .stage{flex-direction:column;gap:28px}
  .resultgrid{grid-template-columns:1fr;justify-items:center;gap:32px}
  .rescol{width:100%;max-width:560px}
}
@media (max-width:560px){
  .navlink{display:none}
  .hero{padding-top:40px}
  .showcase .clip{width:46vw}.showcase .clip.small{width:36vw}
  .field.big{height:auto;flex-wrap:wrap;padding:10px}
  .field.big .prefix{padding-left:6px}
  .field.big input{height:44px}
  .cta.inline{width:100%}
}

/* 로고 */
.logo{display:flex;align-items:center;gap:10px}
.logomark{display:block;height:40px;width:auto;color:var(--ink);stroke:none}
.logotag{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}

/* 영상 자세히 보기 */
.ex{cursor:zoom-in}
.detail{position:fixed;z-index:45;left:50%;top:50%;width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:#fff;border-radius:18px;overflow:hidden;display:grid;grid-template-columns:auto 1fr;opacity:0;pointer-events:none;transform:translate(-50%,-47%) scale(.97);transition:opacity .22s,transform .36s var(--spring)}
.detail.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.dvideo{background:#000;height:min(78vh,760px);aspect-ratio:9/16}
.detail.is-wide{grid-template-columns:1fr;width:min(1000px,calc(100vw - 32px))}
.detail.is-wide .dvideo{height:auto;aspect-ratio:16/9;width:100%}
.dvideo video{object-fit:contain;background:#000}
.dinfo{padding:24px 28px 28px;display:flex;flex-direction:column;overflow-y:auto}
.dtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.dcount{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.dclose{width:40px;height:40px;margin-right:-10px;display:flex;align-items:center;justify-content:center;border-radius:10px}
.dclose:hover{background:var(--soft)}
.dkind{font-size:14px;font-weight:600;color:var(--muted)}
.dinfo h2{margin:6px 0 0;font-size:30px;font-weight:800;letter-spacing:-.035em}
.dinfo p{margin:6px 0 0;font-size:17px;color:var(--sub)}
.dinfo .kv{margin:24px 0 28px}
.dnavs{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dnavs .cta{height:48px;font-size:15px}
.detail.is-wide .dinfo{padding:18px 24px 22px}
.detail.is-wide .dtop{margin-bottom:8px}
@media (max-width:720px){
  .detail{grid-template-columns:1fr;top:auto;bottom:0;left:0;width:100%;max-height:100dvh;border-radius:18px 18px 0 0;transform:translateY(100%)}
  .detail.on{transform:none}
  .dvideo{height:auto;width:100%;max-height:60dvh;aspect-ratio:auto}
}
.widegrid:empty{display:none}
.link.nudge{color:var(--ink);font-weight:700}
.exmore{display:flex;justify-content:center;gap:6px;padding:36px 0 8px}
.exmore.hidden{display:none}
.exmore i{width:7px;height:7px;border-radius:50%;background:#C4C4C4;animation:exdot 1s infinite ease-in-out}
.exmore i:nth-child(2){animation-delay:.15s}.exmore i:nth-child(3){animation-delay:.3s}
@keyframes exdot{0%,100%{opacity:.3}50%{opacity:1}}

/* 분석 결과 + 느낌 고르기 */
.moodwrap{max-width:1100px;margin:0 auto;padding:40px 24px 120px}
.persona{margin:18px 0 0;max-width:720px;font-size:19px;line-height:1.65;color:var(--ink)}
.mdkv{margin-top:22px;max-width:720px}
.mdchip{display:inline-block;margin:0 8px 8px 0;padding:6px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.mdh2{margin-top:44px}
.moods{margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mdcard{text-align:left;border:1.5px solid var(--line);border-radius:16px;padding:12px;background:#fff;transition:border-color .15s}
.mdcard[aria-checked=true]{border-color:var(--ink)}
.mdv{aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#111;position:relative}
.mdv video{width:100%;height:100%;object-fit:cover;display:block}
.mdv iframe.tzr{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}
.mdwait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#9a9a9a;font-size:13px}
.mdwait i{width:7px;height:7px;border-radius:50%;background:#666;display:inline-block;animation:exdot 1s infinite}
.mdwait i:nth-child(2){animation-delay:.15s}.mdwait i:nth-child(3){animation-delay:.3s}
.mdname{display:block;margin-top:12px;font-size:17px;font-weight:700}
.mdname em{font-style:normal;font-size:13px;font-weight:600;color:var(--sub);margin-left:4px}
.mdwhy{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--sub)}
.mdact{max-width:420px}
.fulltabs{display:flex;gap:8px;margin-top:12px}
.fulltabs button{flex:1;height:40px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:600;background:#fff}
.fulltabs button[aria-selected=true]{border-color:var(--ink);background:var(--ink);color:#fff}
@media (max-width:760px){.moods{grid-template-columns:1fr 1fr}}
.finalcol{display:flex;flex-direction:column;align-items:stretch}
.mdkv{grid-template-columns:150px 1fr}
.mdkv dd{text-align:left}

/* 결과: 3편 나란히 */
.reswrap{max-width:1100px;margin:0 auto;padding:48px 24px 110px}
.fulls{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fullv{aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#111}
.fullv video{width:100%;height:100%;object-fit:cover;display:block}
.fullhead{margin-top:14px;display:flex;flex-direction:column;gap:4px}
.fullno{font-size:13px;font-weight:600;color:var(--muted)}
.fullsave{height:44px;padding:0 8px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:600;background:#fff;white-space:nowrap}
.fullsave.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.fullsave.dark:hover{background:#000}
.fullsave:hover{background:var(--soft)}
.resrow{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.resrow .actions{margin-top:0}
@media (max-width:760px){.fulls{grid-template-columns:1fr 1fr 1fr;gap:8px}.resrow{grid-template-columns:1fr}.fullbtns,.fullbtns.two{grid-template-columns:1fr;gap:6px}.fullsave{height:38px;font-size:13px}.fullname{font-size:14px}.fullcredit{font-size:11px}}
/* 뒤로 버튼은 한 줄을 다 쓴다(옆 글자와 붙지 않게) */
.moodwrap .backlink{display:flex;width:max-content}
.moodwrap .kicker{display:block;margin-top:4px}
.fullname{font-size:17px;font-weight:700;line-height:1.35;word-break:keep-all}
.fullbtns{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fullbtns.two{grid-template-columns:1fr 1fr}
.mdwait{flex-direction:row}
.mdwait span{position:absolute;top:calc(50% + 22px);left:0;right:0;text-align:center;font-variant-numeric:tabular-nums}

/* 동시에 만드는 영상마다 진행 막대 (분석 4단계 · 완성 3편) */
.bars{margin:20px 0 0 32px;display:flex;flex-direction:column;gap:14px;max-width:460px}
.bars:empty{display:none}
.bar{display:flex;flex-direction:column;gap:6px}
.barhead{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.barname{color:var(--ink);font-weight:600}
.barpct{color:var(--sub);font-variant-numeric:tabular-nums}
.bartrack{height:4px;background:var(--line);overflow:hidden}
.bartrack i{display:block;height:100%;width:0;background:var(--ink);transition:width 1s linear}
.bar.done .barpct{color:var(--ink);font-weight:600}
@media (max-width:600px){.bars{margin-left:0}}

/* 마지막 화면 문구(결제 화면) */
.ctahelp{margin:8px 0 0}
.ctafield{margin-top:12px;padding-right:16px}
.ctacount{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.ctacount.bad{color:#D93025}
.ctaerr{margin:8px 0 0;min-height:1.4em;color:#D93025}
/* 가게 정보(사장님): 위치·리뷰 캡처 */
.shopbox .placepick .field{gap:8px}
.placed{margin-top:12px;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r)}
.placed .pin{width:14px;height:14px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 5px #EDEDED;flex-shrink:0}
.placed .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.placed b{font-size:16px}
.placed span span,.placed #placedAddr{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt .addr{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.upbtn{margin-top:12px;cursor:pointer}
.upbtn.busy{pointer-events:none;color:var(--muted)}
.revhint{margin:8px 0 0}
.revsrc{margin-top:18px}
.revlab{font-size:15px;font-weight:700;margin:0 0 8px}
.revstat{font-weight:400;font-size:14px;color:var(--muted);margin-left:6px}
.revdrop{padding:0 0 0 6px;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.revsum{margin:16px 0 8px;font-size:16px;font-weight:700}
.chk{width:22px;height:22px;border-radius:6px;border:1.5px solid #C4C4C4;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .18s var(--ease)}
.chk svg{width:13px;height:13px;stroke:#fff;stroke-width:3.2;fill:none;opacity:0}
.opt[aria-checked=true] .chk{border-color:var(--ink);background:var(--ink)}
.opt[aria-checked=true] .chk svg{opacity:1}
.opt .qt{font-size:15px;line-height:1.5}

/* 로그인·회원가입 (화면만) */
.auth .cta.kakao{margin-top:28px}
.or{display:flex;align-items:center;gap:12px;margin:28px 0 20px;font-size:14px;color:var(--muted)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.authform{display:flex;flex-direction:column;gap:14px}
.authform>label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.authform>label .muted{font-weight:400}
.authform input[type=email],.authform input[type=password],.authform input[type=text]{height:52px;width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 14px;font-size:16px;color:var(--ink);outline:0;transition:border-color .15s}
.authform input:focus{border-color:var(--ink)}
.authform input.bad{border-color:#D93025}
.pw{position:relative;display:block}
.pw input{padding-right:64px!important}
.pwtoggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:6px 10px;font-size:13px;color:var(--sub)}
.pwtoggle:hover{color:var(--ink)}
.terms{border:1px solid var(--line);border-radius:12px;padding:6px 16px;margin-top:4px}
.terms label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;color:#333;cursor:pointer}
.terms label span{flex:1}
.terms input{width:20px;height:20px;margin:0;accent-color:var(--ink);flex-shrink:0}
.terms .tall{font-weight:700;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:4px}
.tview{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.autherr{margin:0;min-height:1.4em;font-size:14px;color:#D93025}
.authform .cta{margin-top:2px}
.authlinks{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px;font-size:15px;color:var(--sub)}
.authlinks .link{margin:0}

/* 내 영상 */
.minewrap{max-width:1000px;margin:0 auto;padding:48px 24px 80px}
.minelist{display:flex;flex-direction:column;gap:20px;margin-top:28px}
.minejob{border:1px solid var(--line);border-radius:16px;padding:20px}
.minejob header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.minejob header b{font-size:18px}
.minejob header span{color:var(--sub);font-size:14px}
.minejob header em{margin-left:auto;font-style:normal;font-size:13px;font-weight:600;color:var(--ink)}
.minejob header em.st-teaser,.minejob header em.st-making{color:var(--sub)}
.minejob header em.st-error{color:#D93025}
.minevids{display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:12px;margin-bottom:14px}
.minevids figure{margin:0}
.minevids video,.minevids iframe.tzr{width:100%;aspect-ratio:9/16;border-radius:10px;background:#000;display:block;border:0}
.minevids figcaption{display:flex;justify-content:space-between;font-size:13px;color:var(--sub);margin-top:6px}
.minevids a{color:var(--ink);font-weight:600}
.badge.pro{background:var(--ink);color:#fff;margin-left:0}
.minejob header .badge.pro{font-size:12px;color:#fff}
.minejob header em.st-premium{color:var(--sub)}
.minenote{margin:0 0 4px;font-size:14px;line-height:1.6;color:var(--sub);word-break:keep-all}
.minereq{margin:10px 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:15px;line-height:1.55;word-break:keep-all}
.minereq span{display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--sub)}
.mineempty{border:1px solid var(--line);border-radius:16px;padding:40px 20px;text-align:center}
.mineempty p{margin:0 0 16px;color:var(--sub)}
#logoutBtn{margin-top:32px}
@media (max-width:640px){.minevids{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
/* 약관 링크·법정 고지 */
.foot-links{margin-top:10px!important;display:flex;gap:16px;flex-wrap:wrap}
.foot-links a{color:var(--sub);text-decoration:none}
.foot-links a b{color:var(--ink)}
.legalnote{margin-top:12px;font-size:13px;line-height:1.6;word-break:keep-all}
.legalnote a,.paylegal a,.agree a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.paylegal{margin:28px 0 8px;padding:16px;border:1px solid var(--line);border-radius:12px;font-size:13px;line-height:1.65;color:var(--muted);word-break:keep-all}
.paylegal p{margin:0 0 8px}.paylegal p:last-child{margin:0}
.paylegal b{color:var(--ink)}
.fullcredit{margin-top:10px;font-size:12px;line-height:1.5;color:var(--muted);word-break:keep-all}