:root{--modal-bg: #fdfbf7;--text-color: #333;--input-border: #dadada;--btn-bg: #555;--btn-border: #333;--gray-text: #545454;--white: #fff;--main-font: "Noto Sans KR", sans-serif;--form-width: 620px;--font-size-base: 14px;--link-color: #121212d9}body{font-family:var(--main-font)}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:none;z-index:999;overflow:hidden}.modal-panel{position:absolute;top:0;right:0;width:var(--form-width);max-width:100%;height:100%;background:var(--modal-bg);transform:translate(100%);transition:transform .3s ease-in-out;overflow-y:auto;padding:4rem 2rem;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}#toggle-login:checked+.modal{display:block}#toggle-login:checked+.modal .modal-panel{transform:translate(0)}.login-btn-icon{cursor:pointer;display:inline-flex;align-items:center}.close-btn{position:absolute;top:1rem;right:1rem;display:flex;align-items:center;gap:.25rem;background:none;border:none;padding:1px 6px;font-size:13px;font-family:Arial,sans-serif;color:#000;cursor:pointer}.close-btn span{font-size:inherit;color:inherit}.close-btn svg{width:11px;height:11px;flex-shrink:0}.modal-panel h1{font-size:24px;font-weight:350;line-height:1.4;text-align:center;margin:0 0 24px!important;color:var(--text-color)}.login-desc{font-size:var(--font-size-base);font-weight:400;line-height:1.9;margin-top:24px;margin-bottom:24px;text-align:center;color:var(--text-color)}form{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:2rem}form a{font-size:var(--font-size-base);color:var(--link-color);text-align:left;margin-top:.25rem;width:317.16px}.login-btn,.signup-btn{width:317.16px;font-size:16px;cursor:pointer}.login-btn{height:45px;background:var(--btn-bg);color:var(--white);border:none;margin-top:1rem}.signup-btn{display:inline-block;width:317.16px;height:48px;line-height:48px;text-align:center;font-size:16px;border:1px solid var(--btn-border);background:var(--white);color:var(--btn-border);margin-top:.5rem;text-decoration:none;cursor:pointer;box-sizing:border-box}.sns-login{display:flex;justify-content:center;gap:1rem;margin-top:2rem}.sns-btn svg{width:55px;height:55px}body:has(#toggle-login:checked){overflow:hidden;touch-action:none}.field{position:relative;width:317.16px;margin-bottom:1rem}.field input{width:100%;height:58px;padding:22px 15px 0 20px;font-size:var(--font-size-base);font-weight:400;line-height:1.9;color:var(--gray-text);border:1px solid var(--input-border);background:var(--white);box-sizing:border-box}.field label{position:absolute;top:50%;left:22px;transform:translateY(-50%);font-size:var(--font-size-base);color:var(--gray-text);pointer-events:none;transition:all .2s ease;background:var(--modal-bg);padding:0 2px}.field input:focus+label,.field input:not(:placeholder-shown)+label{top:17px;font-size:12px;color:var(--text-color)}