@font-face{font-family:Pretendard;src:url('../qollab-landing-v1/assets/PretendardVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--ink:#17151c;--muted:#716d75;--paper:#f8f6f1;--purple:#6542c4;--coral:#f47f60}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--paper);color:var(--ink);font-family:Pretendard,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.site-header{background:rgba(248,246,241,.96)}
.header-inner{min-height:78px;display:flex;align-items:center;gap:32px}
.wordmark img{display:block;width:116px;height:auto}
.primary-nav{display:flex;align-items:center;gap:5px}
.registration-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,460px);align-items:center;gap:clamp(45px,8vw,120px);min-height:calc(100svh - 78px);padding-block:90px 110px}
.intro{min-width:0}
.eyebrow,.form-kicker{margin:0 0 17px;color:var(--purple);font-size:13px;font-weight:850}
.intro h1{margin:0;font-size:clamp(50px,5.6vw,78px);font-weight:900;line-height:1.08;letter-spacing:-.075em;word-break:keep-all}
.intro h1 em{color:var(--purple);font-style:normal}
.intro-description{max-width:520px;margin:24px 0 0;color:var(--muted);font-size:18px;line-height:1.65;word-break:keep-all}
.preview{position:relative;width:100%;max-width:440px;aspect-ratio:4/3;margin-top:47px;border:1px solid #eee8e4;border-radius:23px;background:#fff;box-shadow:0 18px 45px rgba(45,32,39,.11);container-type:inline-size}
.route-place{position:absolute;width:27%;height:27%;padding:4px 4px 0;border-radius:12px;background:#fff;box-shadow:0 4px 12px rgba(45,32,39,.08);text-align:center}
.route-cafe{left:6%;top:7%;transform:rotate(-4deg)}.route-art{left:68%;top:11%;transform:rotate(4deg)}.route-dessert{left:67%;top:67%;transform:rotate(3deg)}.route-walk{left:8%;top:69%;transform:rotate(-3deg)}
.route-photo{height:76%;overflow:hidden;border-radius:8px}
.route-photo img{display:block;width:100%;height:100%;object-fit:cover}
.route-art img,.route-dessert img{object-position:center 18%;transform:scale(1.25)}
.route-place span{display:block;padding-top:3px;font-size:clamp(10px,2.9cqw,13px);font-weight:750;color:var(--ink)}
.route-caption{position:absolute;left:27%;top:43%;width:46%;text-align:center}
.route-caption strong{display:block;font-size:clamp(18px,5cqw,23px);letter-spacing:-.05em}
.route-caption>span{display:block;margin-top:6px;font-size:clamp(9px,2.5cqw,11px);color:var(--muted);line-height:1.4}
.route-complete{margin:11px -20px 0;color:var(--purple);font-size:clamp(10px,2.7cqw,12px);opacity:0}
html[lang=en] .route-caption{left:21%;top:42%;width:58%}
html[lang=en] .route-caption strong{font-size:clamp(16px,4.2cqw,19px)}
html[lang=en] .route-caption>span{margin-top:4px;font-size:clamp(8px,2.2cqw,10px)}
html[lang=en] .route-complete{margin-top:7px;font-size:clamp(9px,2.4cqw,11px)}
.route-footprints{position:absolute;inset:0;pointer-events:none}
.route-footprint{position:absolute;width:2.2%;height:3.7%;color:var(--purple);opacity:0;transform:translate(-50%,-50%) rotate(var(--angle))}
.route-footprint svg{display:block;width:100%;height:100%;transform:scaleX(var(--side));transform-origin:center}
.route-playing .route-footprint{animation:footprint-stamp 280ms cubic-bezier(.2,.7,.3,1) var(--delay) both}
.route-playing .route-photo{animation:place-arrival 420ms ease-in-out var(--arrival) both}
.route-playing .route-cafe .route-photo{animation:place-arrival 420ms ease-in-out .6s,place-arrival 420ms ease-in-out 4.85s}
.route-playing .route-complete{animation:route-finish 500ms ease 5.1s both}
@keyframes footprint-stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) scale(.65)}60%{opacity:.8;transform:translate(-50%,-50%) rotate(var(--angle)) scale(1.08)}100%{opacity:.7;transform:translate(-50%,-50%) rotate(var(--angle)) scale(1)}}
@keyframes place-arrival{50%{transform:scale(1.025);box-shadow:0 5px 16px rgba(101,66,196,.14)}}
@keyframes route-finish{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.route-playing .route-footprint,.route-playing .route-photo,.route-playing .route-cafe .route-photo,.route-playing .route-complete{animation:none}.route-footprint{opacity:.65}.route-complete{opacity:1}}
.form-panel{padding:39px 38px 34px;border:1px solid #ebe6e4;border-radius:28px;background:#fff;box-shadow:0 22px 60px rgba(42,31,47,.09)}
.form-kicker{margin-bottom:8px}
.form-panel h2{margin:0;font-size:34px;font-weight:850;letter-spacing:-.065em}
.form-description{margin:8px 0 31px;color:var(--muted);font-size:15px;line-height:1.55}
.field+.field{margin-top:19px}
.field label{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:14px;font-weight:780}
.field label span{color:#a49aa7;font-size:11px;font-weight:650}
.field input{width:100%;height:52px;padding:0 15px;border:1px solid #ddd8dc;border-radius:12px;background:#fff;color:var(--ink);font:500 16px Pretendard,'Malgun Gothic',sans-serif;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:#aaa3a9}
.field input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(101,66,196,.1);outline:none}
.consent-note{margin-top:24px;padding:17px 18px;border-radius:13px;background:#f8f6fb;color:#66606d}
.consent-note strong{display:block;margin-bottom:7px;color:#44384c;font-size:12px}
.consent-note p{margin:0;font-size:12px;line-height:1.6;word-break:keep-all}
.consent-note a{color:var(--purple);text-decoration:underline;text-underline-offset:2px}
.consent-check{display:flex;align-items:flex-start;gap:9px;margin-top:16px;color:#433d49;font-size:13px;line-height:1.5;cursor:pointer}
.consent-check input{width:17px;height:17px;flex:none;margin:1px 0 0;accent-color:var(--purple)}
.submit-button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:54px;margin-top:25px;border:0;border-radius:13px;background:var(--ink);color:#fff;font:750 15px Pretendard,'Malgun Gothic',sans-serif;cursor:pointer;transition:background .2s,transform .2s}
.submit-button:hover{background:var(--purple);transform:translateY(-2px)}
.delivery-note{margin:13px 0 0;color:#817b84;font-size:12px;line-height:1.55;text-align:center;word-break:keep-all}
.form-status{margin:15px 0 0;padding:12px;border-radius:10px;background:#f1ebfc;color:#5633b1;font-size:13px;line-height:1.5}
.contact-note{margin:25px 0 0;color:#817b84;font-size:12px;line-height:1.55;word-break:break-word}
.contact-note a{color:var(--purple);text-decoration:underline;text-underline-offset:2px}
@media(max-width:850px){.registration-layout{grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:35px}.intro h1{font-size:clamp(43px,5.6vw,66px)}.intro-description{font-size:16px}}
@media(max-width:700px){.wrap{width:calc(100% - 32px)}.registration-layout{display:block;min-height:0;padding-block:34px 70px}.intro h1{font-size:clamp(43px,11vw,65px)}.intro-description{font-size:15px;margin-top:17px}.preview{margin-top:28px}.form-panel{margin-top:39px;padding:29px 22px 27px}.form-panel h2{font-size:30px}.form-description{margin-bottom:26px}}
@media(max-width:360px){.registration-layout{padding-top:26px}.form-panel{padding-inline:18px}.intro h1{font-size:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0ms!important}}