@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
:root{--canvas:#fff8e8;--ink:#183153;--coral:#ff675d;--lemon:#ffd84d;--sky:#4db7f2;--muted:#64748b;--line:#e8dfce;--shadow:0 20px 60px rgba(24,49,83,.12)}
*{box-sizing:border-box}html{color:var(--ink);background:var(--canvas);font-family:Pretendard,"Noto Sans KR",sans-serif}body{margin:0}a{color:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.brand{font-weight:900;text-decoration:none;letter-spacing:-.03em}.brand span{color:var(--coral)}.topbar,.survey-header,.admin-header{display:flex;align-items:center;justify-content:space-between}.topbar{max-width:1200px;margin:auto;padding:26px 32px}.text-link{font-size:14px;font-weight:700}.hero{min-height:680px;max-width:1200px;margin:auto;padding:64px 32px 90px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:60px}.eyebrow{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--coral)}h1,h2,p{word-break:keep-all}.hero h1{font-family:"Gowun Dodum",sans-serif;font-size:clamp(54px,6vw,84px);line-height:1.06;letter-spacing:-.04em;margin:22px 0}.hero h1 em{font-style:normal;color:var(--coral)}.hero-copy>p{font-size:18px;line-height:1.7;max-width:520px;color:#4b607a}.button{min-height:52px;padding:0 24px;border:0;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:18px;font:inherit;font-weight:900;text-decoration:none;cursor:pointer}.primary{background:var(--ink);color:white;box-shadow:0 8px 0 rgba(24,49,83,.16)}.primary:hover{transform:translateY(-2px)}.button:active{transform:translateY(2px);filter:brightness(.95)}.secondary{background:white;color:var(--ink);border:1px solid var(--line)}.hero .button{margin-top:18px}.hero-copy>small{display:block;color:var(--muted);margin-top:18px}.scan-card{display:flex;align-items:center;gap:18px;margin-top:34px;padding:16px 20px;background:white;border:1px solid var(--line);border-radius:14px;max-width:520px;box-shadow:0 5px 20px rgba(24,49,83,.06)}.scan-card img{width:120px;height:120px;flex:none}.scan-card b{display:block;font-size:16px;margin-bottom:6px}.scan-card span{font-size:14px;line-height:1.55;color:var(--muted)}.hero-art{min-height:470px;position:relative;display:grid;place-items:center}.hero-art:before{content:"";position:absolute;inset:15% 0;background:var(--lemon);border-radius:52% 48% 36% 64%/55% 38% 62% 45%;transform:rotate(-7deg)}.ticket{position:relative;width:280px;min-height:350px;padding:45px 35px;background:white;box-shadow:var(--shadow);transform:rotate(5deg);display:flex;flex-direction:column;justify-content:space-between}.ticket:before,.ticket:after{content:"";position:absolute;top:48%;width:30px;height:30px;border-radius:50%;background:var(--lemon)}.ticket:before{left:-15px}.ticket:after{right:-15px}.ticket b{font-size:46px;color:var(--coral)}.ticket span{font-size:25px;line-height:1.35;font-weight:800}.ticket i{font-style:normal;font-size:42px;color:var(--sky)}.sun,.spark{position:absolute;font-size:64px}.sun{right:3%;top:4%;color:var(--coral);animation:spin 14s linear infinite}.spark-one{left:3%;top:20%;color:var(--sky)}.spark-two{right:9%;bottom:8%;color:var(--coral)}.proof{background:var(--ink);color:white;padding:90px max(32px,calc((100vw - 1136px)/2))}.proof>p{color:var(--lemon);font-weight:900}.proof h2{font-size:clamp(36px,4vw,58px);line-height:1.1;letter-spacing:-.04em}.proof ol{list-style:none;padding:45px 0 0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ffffff30}.proof li{background:var(--ink);padding:24px;display:flex;flex-direction:column;gap:35px}.proof li b{color:var(--coral)}.proof li span{font-size:18px;font-weight:800}
.survey-page{min-height:100vh;background:linear-gradient(135deg,var(--canvas),#fff 55%,#e9f8ff)}.survey-shell{width:min(100%,560px);min-height:100vh;margin:auto;padding:28px 24px 50px;display:flex;flex-direction:column}.survey-header{padding:4px 2px 18px}.survey-header>span{font-size:13px;font-weight:800}.progress{height:9px;background:#ebe4d8;border-radius:9px;overflow:hidden}.progress i{display:block;height:100%;background:var(--coral);border-radius:9px;transition:width .38s cubic-bezier(.22,.9,.28,1)}.survey-shell form{display:grid;flex:1}.question{border:0;padding:48px 0 0;margin:0;display:flex;flex-direction:column;grid-area:1/1;visibility:hidden;opacity:0;transform:translateX(72px) scale(.94);transition:opacity .2s ease-out,transform .42s cubic-bezier(.22,.9,.28,1),visibility 0s linear .42s}.question.back{transform:translateX(-72px) scale(.94)}.question.active{visibility:visible;opacity:1;transform:none;transition:opacity .3s ease-out,transform .42s cubic-bezier(.22,.9,.28,1),visibility 0s}.question legend{padding:0;font-size:30px;line-height:1.2;letter-spacing:-.04em;font-weight:900}.question legend small{display:block;color:var(--coral);font-size:11px;letter-spacing:.12em;margin-bottom:16px}.choices{display:grid;gap:12px;margin-top:34px}.choices label{position:relative}.choices input{position:absolute;opacity:0}.choices span,.text-answer textarea{display:block;width:100%;padding:23px 20px;background:white;border:2px solid transparent;border-radius:14px;font-size:16px;line-height:1.5;box-shadow:0 5px 20px rgba(24,49,83,.06)}.choices span{position:relative;padding-left:60px;font-weight:600}.choices span:before{content:'';position:absolute;left:20px;top:50%;margin-top:-11px;width:22px;height:22px;border-radius:50%;border:2px solid #d5dfeb;background:white;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}.choices input:checked+span:before{border-color:var(--coral);background:var(--coral);box-shadow:inset 0 0 0 4px white}.choices input:focus-visible+span{outline:3px solid var(--sky);outline-offset:2px}.choices input:checked+span{border-color:var(--coral);background:#fff1ee;font-weight:800;transform:translateX(4px);box-shadow:0 10px 26px rgba(255,103,93,.20)}.text-answer{margin-top:34px;position:relative}.text-answer textarea{resize:vertical;min-height:170px;font-family:inherit}.text-answer small{position:absolute;right:14px;bottom:12px;color:var(--muted)}.error{color:#b42318;font-weight:700}.question-actions{display:flex;gap:10px;margin-top:auto;padding-top:30px}.question-actions .button{flex:1}.thanks-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--lemon)}.thanks-card{position:relative;width:min(100%,480px);padding:60px 35px;background:white;text-align:center;box-shadow:var(--shadow)}.thanks-icon{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;margin:0 auto 28px;background:var(--coral);color:white;font-size:42px;font-weight:900}.thanks-card h1{font-size:42px;line-height:1.12;letter-spacing:-.04em}.thanks-card p{line-height:1.7}.thanks-card .button{margin-top:18px}.confetti{position:absolute;font-size:54px;color:var(--sky);right:22px;top:18px}
.admin-page{background:#f8f6ef;min-height:100vh}.admin-shell{max-width:1180px;margin:auto;padding:32px}.admin-header{margin-bottom:36px}.admin-header p{margin:6px 0 0;color:var(--muted)}.compact{min-height:46px}.admin-grid{display:grid;grid-template-columns:300px 1fr;gap:18px}.metric,.qr-card,.responses{background:white;border:1px solid var(--line);padding:28px}.metric{display:flex;flex-direction:column}.metric span,.qr-card span,.section-heading span{font-size:12px;font-weight:900;color:var(--coral);letter-spacing:.08em}.metric strong{font-size:84px;line-height:1.05;margin:40px 0 12px}.metric small{color:var(--muted)}.qr-card{display:flex;justify-content:space-between;gap:30px}.qr-card h2{font-size:26px;line-height:1.2}.qr-card code{font-size:12px;color:var(--muted);overflow-wrap:anywhere}.qr-card a{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800}.qr-card img{width:140px;height:140px}.responses{margin-top:18px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.section-heading h2{font-size:32px;margin:8px 0 0}.section-heading small{color:var(--muted)}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:14px}th,td{padding:15px 12px;text-align:left;border-top:1px solid #eee7da}th{font-size:12px;color:var(--muted)}.status{display:inline-block;background:#fff1ee;color:#b52c28;padding:5px 9px;border-radius:999px;font-weight:800}.empty{padding:55px 20px;text-align:center;display:flex;flex-direction:column;gap:12px;background:var(--canvas)}.empty b{font-size:22px}.empty span{color:var(--muted)}.empty a{font-weight:900;color:var(--coral)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.scan-card{display:none}.topbar{padding:22px 20px}.hero{min-height:auto;padding:50px 20px 70px;display:flex;flex-direction:column;align-items:stretch;gap:20px}.hero h1{font-size:49px;line-height:1.08}.hero-copy>p{font-size:16px}.hero .button{width:100%}.hero-art{min-height:350px}.ticket{width:220px;min-height:280px;padding:32px 26px}.ticket b{font-size:38px}.ticket span{font-size:20px}.sun{font-size:50px}.proof{padding:65px 20px}.proof ol{grid-template-columns:1fr 1fr}.admin-shell{padding:22px 16px}.admin-header{align-items:flex-start;gap:14px}.admin-header .button{padding:0 14px}.admin-grid{grid-template-columns:1fr}.metric strong{font-size:64px;margin:25px 0 8px}.qr-card{flex-direction:column}.qr-card a{justify-content:space-between}.section-heading{align-items:flex-start;flex-direction:column}.question legend{font-size:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── 모션 레이어 ──────────────────────────────────────────────
   공고: "밝은 톤의 색상 배치 및 문항 전환 간 애니메이션 효과 출력".
   장식이 아니라 사용자 행동에 붙는 피드백으로 설계했다.
   문항 활성화 시 규칙이 새로 적용되며 애니메이션이 매번 재시작한다
   (겹침 레이아웃이라 display 토글로는 재시작되지 않는다).
   전역 prefers-reduced-motion 블록이 !important로 전부 끈다. */
@keyframes riseIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pickPop{0%{transform:translateX(4px) scale(1)}42%{transform:translateX(4px) scale(1.04)}100%{transform:translateX(4px) scale(1)}}
@keyframes badgePop{0%{transform:scale(.3) rotate(-25deg);opacity:0}60%{transform:scale(1.14) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes burst{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0}25%{opacity:1}100%{transform:translate(var(--bx),var(--by)) scale(1) rotate(var(--br));opacity:0}}
@keyframes float{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-14px)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:.85}50%{transform:scale(1.25) rotate(18deg);opacity:1}}
@keyframes barGlow{0%{box-shadow:0 0 0 0 rgba(255,103,93,.55)}100%{box-shadow:0 0 0 9px rgba(255,103,93,0)}}

/* 설문 — 문항이 바뀔 때마다 내용이 순서대로 올라온다 */
.question.active legend,.question.active .choices label,.question.active .text-answer{animation:riseIn .44s cubic-bezier(.22,1.15,.36,1) backwards}
.question.active legend{animation-delay:.04s}
.question.active .text-answer{animation-delay:.12s}
.question.active .choices label:nth-child(1){animation-delay:.10s}
.question.active .choices label:nth-child(2){animation-delay:.17s}
.question.active .choices label:nth-child(3){animation-delay:.24s}
.question.active .choices label:nth-child(4){animation-delay:.31s}
/* 선택하는 순간 손끝에 반응이 온다 */
.choices input:checked+span{animation:pickPop .36s cubic-bezier(.34,1.56,.64,1)}
.progress i{animation:barGlow .6s ease-out}

/* 완료 — 참여에 대한 보상 순간 */
.thanks-icon{animation:badgePop .62s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:.06s}
.thanks-card .eyebrow,.thanks-card h1,.thanks-card p,.thanks-card .button{animation:riseIn .5s cubic-bezier(.22,1.15,.36,1) backwards}
.thanks-card .eyebrow{animation-delay:.30s}
.thanks-card h1{animation-delay:.38s}
.thanks-card p{animation-delay:.46s}
.thanks-card .button{animation-delay:.54s}
.confetti{animation:burst 1.1s ease-out backwards}
.confetti:nth-of-type(1){--bx:-120px;--by:150px;--br:200deg;animation-delay:.22s}
.confetti:nth-of-type(2){--bx:90px;--by:190px;--br:-160deg;animation-delay:.30s;color:var(--coral)}
.confetti:nth-of-type(3){--bx:-40px;--by:230px;--br:120deg;animation-delay:.38s;color:var(--lemon)}
.confetti:nth-of-type(4){--bx:150px;--by:120px;--br:-240deg;animation-delay:.46s}

/* 랜딩 — 첫인상 */
.hero-copy>*{animation:riseIn .6s cubic-bezier(.22,1.15,.36,1) backwards}
.hero-copy>.eyebrow{animation-delay:.05s}
.hero-copy>h1{animation-delay:.13s}
.hero-copy>p{animation-delay:.23s}
.hero-copy>.button{animation-delay:.32s}
.hero-copy>small{animation-delay:.40s}
.hero-copy>.scan-card{animation-delay:.50s}
.ticket{animation:float 5.5s ease-in-out infinite}
.spark{animation:twinkle 3.2s ease-in-out infinite}
.spark-two{animation-delay:1.1s}
/* 네 조각이 배지 근처 한 점에서 흩어지도록 원점을 옮긴다 */
.confetti{font-size:42px;left:50%;right:auto;top:52px;margin-left:-21px;pointer-events:none}

/* 현장 맥락 실사 스트립 — 제품이 쓰이는 물리적 동선을 사진으로 설명한다 */
.scene{max-width:1200px;margin:auto;padding:20px 32px 90px}
.scene-head h2{font-size:clamp(30px,3.4vw,46px);line-height:1.15;letter-spacing:-.04em;margin:10px 0 0}
.scene-strip{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:44px 0 0;margin:0}
.scene-strip li{display:flex;flex-direction:column}
.scene-strip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;box-shadow:var(--shadow);margin-bottom:18px}
.scene-strip b{font-size:18px;margin-bottom:8px}
.scene-strip span{font-size:15px;line-height:1.6;color:var(--muted)}
@media(max-width:700px){.scene{padding:6px 20px 60px}.scene-strip{grid-template-columns:1fr;gap:34px;padding-top:30px}}

/* 문항마다 다른 대형 숫자 — 화면 정체성과 진행 위치를 동시에 준다.
   빈 하단을 채우면서 전환 때 본문보다 크게 움직여 깊이를 만든다. */
.question{position:relative}
.ghost{position:absolute;right:-6px;bottom:90px;font-size:170px;line-height:1.05;font-weight:900;letter-spacing:-.06em;color:rgba(255,103,93,.10);pointer-events:none;user-select:none;z-index:0}
.question.active .ghost{animation:ghostIn .76s cubic-bezier(.22,1.15,.36,1) backwards;animation-delay:.06s}
@keyframes ghostIn{from{opacity:0;transform:translateX(70px) scale(.72)}to{opacity:1;transform:none}}
.question legend,.choices,.text-answer,.question-actions,.error{position:relative;z-index:1}