:is(.todoke-form,.loopi-form){--lf-accent: #421dcc;--lf-accent-press: #3819b8;--lf-border: #d4d4d8;--lf-radius: 8px;display:flex;flex-direction:column;gap:1.1rem;max-width:40rem;margin:0 auto;background:#fff;border:1px solid #e4e4e7;border-radius:12px;padding:clamp(1.25rem,3vw,1.75rem);box-shadow:0 1px 3px #0000000f,0 6px 16px #0000000d}:is(.todoke-form,.loopi-form) :is(.todoke-field,.loopi-field){display:flex;flex-direction:column;gap:.35rem}:is(.todoke-form,.loopi-form) :is(.todoke-field,.loopi-field)>span{font-family:Open Sans,sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.02em;color:#444}:is(.todoke-form,.loopi-form) :is(.todoke-field,.loopi-field):has(input:required)>span:after,:is(.todoke-form,.loopi-form) :is(.todoke-field,.loopi-field):has(textarea:required)>span:after,:is(.todoke-form,.loopi-form) :is(.todoke-field,.loopi-field):has(select:required)>span:after{content:" *";color:#dc2626;font-weight:700}:is(.todoke-form,.loopi-form) input,:is(.todoke-form,.loopi-form) textarea,:is(.todoke-form,.loopi-form) select{font:inherit;width:100%;padding:.65rem .8rem;border:1px solid var(--lf-border);border-radius:var(--lf-radius);background:#fafafa;color:#18181b;transition:border-color .15s,box-shadow .15s,background .15s}:is(.todoke-form,.loopi-form) input:focus,:is(.todoke-form,.loopi-form) textarea:focus,:is(.todoke-form,.loopi-form) select:focus{outline:none;background:#fff;border-color:var(--lf-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--lf-accent) 22%,transparent)}:is(.todoke-form,.loopi-form) textarea{resize:vertical;min-height:6rem}:is(.todoke-form,.loopi-form) select:has(option[value=""]:checked){color:#71717a}:is(.todoke-form,.loopi-form) :is(.todoke-submit,.loopi-submit){font-family:Nanum Myeongjo,serif;font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--lf-accent);border:none;border-radius:9999px;padding:.85rem 1.9rem;cursor:pointer;align-self:flex-start;transition:background .15s,transform .05s}:is(.todoke-form,.loopi-form) :is(.todoke-submit,.loopi-submit):hover{background:var(--lf-accent-press)}:is(.todoke-form,.loopi-form) :is(.todoke-submit,.loopi-submit):active{transform:translateY(1px)}:is(.todoke-form,.loopi-form) :is(.todoke-submit,.loopi-submit):disabled{opacity:.6;cursor:default}:is(.todoke-form,.loopi-form) :is(.todoke-check,.loopi-check){flex-direction:row;align-items:flex-start;gap:.55rem}:is(.todoke-form,.loopi-form) :is(.todoke-check,.loopi-check) input[type=checkbox]{width:auto;flex:none;margin:.15em 0 0;padding:0;box-shadow:none;accent-color:var(--lf-accent)}:is(.todoke-form,.loopi-form) :is(.todoke-check,.loopi-check)>span{font-size:.85rem;font-weight:400;line-height:1.5;color:#444}:is(.todoke-form,.loopi-form) :is(.todoke-check,.loopi-check) a{color:var(--lf-accent);text-decoration:underline}:is(.todoke-form,.loopi-form) :is(.todoke-msg,.loopi-msg){margin:0;font-size:.9rem;font-weight:600}:is(.todoke-form,.loopi-form) :is(.todoke-msg,.loopi-msg)[data-ok]{color:#15803d}:is(.todoke-form,.loopi-form) :is(.todoke-msg,.loopi-msg)[data-err]{color:#b91c1c}
