*{box-sizing:border-box;margin:0}html,body,#root{height:100%}body{color:#fff;-webkit-tap-highlight-color:transparent;background:#1b1620;font-family:-apple-system,Apple SD Gothic Neo,Noto Sans KR,sans-serif}button{font:inherit;cursor:pointer;color:inherit;border:0}button:disabled{opacity:.5}.capture{flex-direction:column;height:100dvh;display:flex;position:relative}.center{text-align:center;flex-direction:column;align-items:center;gap:16px;margin:auto;padding:24px;display:flex}.center h1{font-size:28px}.sub{opacity:.7}.primary{background:#ff7a9c;border-radius:999px;padding:14px 28px;font-weight:700}.primary.big{margin-top:12px;padding:20px 44px;font-size:22px}.ghost{background:#ffffff26;border-radius:999px;padding:14px 22px}.error{z-index:5;background:#c0392b;border-radius:10px;padding:10px 14px;font-size:14px;position:absolute;top:12px;left:12px;right:12px}.camera{touch-action:none;background:#000;flex:1;position:relative;overflow:hidden;container-type:size}.zoom{z-index:2;background:#0006;border-radius:999px;align-items:center;gap:10px;width:min(60%,320px);padding:6px 14px;font-size:14px;display:flex;position:absolute;bottom:120px;left:50%;transform:translate(-50%)}.zoom input{accent-color:#ff7a9c;flex:1}.crop{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.crop-box{width:min(100cqw, calc(100cqh * var(--r)));aspect-ratio:var(--r);border:1px solid #ffffffb3;box-shadow:0 0 0 100vmax #0000008c}.crop-box.full{aspect-ratio:auto;width:100cqw;height:100cqh;box-shadow:none;border:0}.ratios{z-index:2;justify-content:center;gap:8px;display:flex;position:absolute;top:12px;left:0;right:0}.ratios .chip{background:#00000080}.ratios .chip.on{background:#ff7a9c}.camera video{object-fit:cover;width:100%;height:100%}.controls{padding:24px 28px calc(24px + env(safe-area-inset-bottom));justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:0;left:0;right:0}.controls .ghost,.controls .spacer{width:56px;height:56px;padding:0;font-size:22px}.shutter{background:#fff padding-box padding-box;border:6px solid #ffffff80;border-radius:50%;width:76px;height:76px}.review{flex-direction:column;flex:1;min-height:0;display:flex}.preview{background:#000;flex:1;justify-content:center;align-items:center;min-height:0;padding:12px;display:flex}.preview canvas{object-fit:contain;max-width:100%;max-height:100%}.chips-wrap{flex-direction:column;gap:8px;padding:10px 0;display:flex}.chips{scrollbar-width:none;gap:8px;padding:0 12px;display:flex;overflow-x:auto}.chip{background:#ffffff1f;border-radius:999px;flex:none;padding:8px 16px;font-size:14px}.chip.on{background:#ff7a9c;font-weight:700}.actions{padding:4px 16px calc(16px + env(safe-area-inset-bottom));gap:12px;display:flex}.actions .primary{flex:1}.screen{background:radial-gradient(circle at 30% 20%,#3a2a4d,#14101a 70%);position:fixed;inset:0;overflow:hidden}.title{text-align:center;letter-spacing:.3em;opacity:.35;text-transform:uppercase;font-size:2.4vw;position:absolute;bottom:3vh;left:0;right:0}.empty{opacity:.6;justify-content:center;align-items:center;font-size:3vw;display:flex;position:absolute;inset:0}.float{animation:ease-in-out infinite alternate drift;position:absolute}.float img{border-radius:6px;width:100%;animation:ease-in-out infinite alternate bob;display:block;box-shadow:0 1.2vw 3vw #0000008c}.appear{animation:1.2s ease-out both fade}.arrive{animation:2.6s cubic-bezier(.2,.8,.2,1) both arrive}@keyframes drift{0%{transform:translate(-2.5vw)}to{transform:translate(2.5vw)}}@keyframes bob{0%{transform:translateY(-.9vw) rotate(calc(var(--rot) - 1.5deg))}to{transform:translateY(.9vw) rotate(calc(var(--rot) + 1.5deg))}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes arrive{0%{opacity:0;transform:translate(var(--dx), var(--dy)) scale(.2)}15%{opacity:1;transform:translate(var(--dx), var(--dy)) scale(1.9)}60%{transform:translate(var(--dx), var(--dy)) scale(1.9)}to{transform:translate(0)scale(1)}}@media (orientation:landscape){.controls{padding:16px calc(20px + env(safe-area-inset-right)) 16px 16px;flex-direction:column;top:0;left:auto}.review{grid-template-rows:1fr auto;grid-template-columns:1fr 300px;display:grid}.preview{grid-row:1/3}.chips-wrap{align-self:end}.chips{flex-wrap:wrap;overflow:visible}.actions{padding-bottom:16px}}
